크롬 이미지 흐림 현상 최소화

퍼블리싱을 하다보면 웹에 게시된 이미지 해상도와 원본 해상도가 일치한다면 문제없지만, 원본 해상도보다 확대 또는 축소되는 경우에 이미지가 눈에 띄게 흐려진다. 이 현상은 다른 브라우저에서도 일어나는 현상이지만 유독 크롬에서 심하게 나타나는데 이 문제를 해결하기 위해 오랜 시간 찾아봤지만 완벽한 해결책은 없었고 적정선에서 타협할만한 방법을 몇 가지 알 수 있었다.

1. 이미지 랜더링 방식을 바꾼다.

image-rendering: -webkit-optimize-contrast;

2. z축을 0으로 적용하여 깊이감을 없앤다.

transform: translateZ(0);

3. 뒷면을 보이지 않게 함으로써 2번과 유사하게 입체감을 없앤다.

backface-visibility: hidden;

위와 같은 CSS 수정을 통해 크롬, 사파리 등 브라우저에서 이미지 흐림 현상 문제를 많이 해소해준다.

출처 - 크롬에서 이미지가 흐릴 때
https://lpla.tistory.com/139