Chrome에서 이미지 크기가 흐려지는 것을 방지하려면 어떻게해야하나요?

Question

크기가 조정 된 작은 이미지를 표시하는 등 이미지 크기를 조정하면 이미지가 실제로 흐리게 보입니다.

<img src="largeimage.jpg" width=30 height=30 \> 

다른 브라우저에서는 흐리게 보이지 않지만 Chrome에서는 너무 흐릿합니다. www.twitter.com에서 보았던 새로운 디자인은 많은 크기의 이미지를 가지고 있으며 어떻게 든 크기가 조정 된 이미지를 흐리게 처리했습니다. 나는 이것을 시도했다.

image-rendering: crisp-edges; 
image-rendering: pixelated; 

하지만 불행히도 문제가 해결되지 않습니다.

아래는 비교입니다. 왼쪽의 경우 오른쪽에 비해 매우 흐릿한 것을 볼 수 있습니다.

올바른 방법은 무엇입니까?

Answer 1

시도해 보셨습니까? :)

filter: blur(0); 
-webkit-filter: blur(0); 
transform: translateZ(0); 
-webkit-transform: translateZ(0); 

Answer 2

이미지를 일정 비율로 조정하면 Chrome의 성능이 향상됩니다. 예를 들어 375 픽셀 이미지를 100으로 리사이즈하면 이미지가 흐릿 해지지 만 200에서 100으로 리사이즈하면 50 % 크기로도 더 좋은 결과를 얻을 수 있습니다.

편집 가능한 테스트 환경이 없으면 문제를 해결할 수 있는지 확실하지 않지만 한 번 해보는 것이 좋습니다.