javascript - 이미지가 브라우저에 로드될 때 이미지 주변의 픽셀이 흐릿해지는 이유는 무엇입니까?

Question

1000px*1000px의 사진을 만들었습니다. Windows에서 확대하면 정상적으로 보입니다.
프런트 엔드에서 이 사진을 요청한 후 스타일을 설정합니다: width: 40000px; 여러 번 확대하면 픽셀이 Blurry로 둘러싸여 있습니다
아무리 확대해도 표시되어야 할 것은 항상 경계가 명확한 균일한 색상 블록이어야 한다고 생각합니다
다음에 각 픽셀의 내용을 완벽하게 표시할 수 있는 방법이 없을까요? 브라우저에서 이미지가 확대되었나요?

Answer 1

브라우저에는 이미지 확대를 위한 흐림 알고리즘이 있습니다. 이미지에 픽셀이 하나뿐인 것은 무리인 것 같지만 일반 이미지의 경우 이러한 흐림 처리를 사용하면 이미지를 흐리게 하는 대신 확대된 이미지를 원본 이미지에 더 가깝게 만들 수 있습니다. 확대하면 바로 모자이크가 됩니다

Answer 2

이미지 형식에 문제가 있는 걸까요

Answer 3

으아악