크롬 이미지 흐림 현상

업무 하면서 마주친 이슈들, 기억하고 기록하고 정리해보자.
※ 해결방법만 빠르게 보고 싶은 사람은 바로 🛠 ISSUE 해결 부터 확인해주세요 (_ _)

---

🚧 ISSUE

ISSUE : 웹에 게시된 이미지와 원본 이미지의 해상도 차이가 있을 때 이미지가 흐리게 보임

+사실 나는 이 이슈를 직접 겪어보진 않았지만 언젠가 나에게 도움이 되겠지..? 라는 마음으로 정리...

🛠 ISSUE 해결

가장 최고의 방법은 해상도가 일치하는 것이겠지만(너무 당연한 소리) 그렇지 못한 상황일 때 일반적으로 아래 3가지 방법을 사용하는 것 같다.

1. 이미지 랜더링 방식 변경

image-rendering: -moz-crisp-edges; // firefox
image-rendering: -o-crisp-edges; // opera
image-rendering: -webkit-optimize-contrast; // 비표준
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; // ie, 비표준

image-rendering 은 원본 이미지를 기준으로 확대 또는 축소 되었을 때에만 영향을 끼친다.
즉, image 에만 사용 가능한 CSS이며, 100x100 이미지의 사이즈가 그대로 적용 되었을 때는 CSS가 적용되지 않는다. 100x100 보다 작거나(50x50) 혹은 크거나(200x200) 일때만 적용 가능하다.
default 값은 auto 로 설정되어있으며 ie 에서는 지원하지 않으니 사용에 주의하자.

2. translate z

-ms-transform: translateZ(0); // ie
-moz-transform: translateZ(0); // firefox
-0-transform: translateZ(0); // opera
-webkit-transform: translateZ(0);
transform: translateZ(0);

z축을 0 으로 설정하여 깊이감을 없앤다.

3. backface-visibility

-moz-backface-visibility: hidden; // firefox
-webkit-backface-visibility: hidden;
backface-visibility: hidden;

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

---

참고링크
https://developer.mozilla.org/ko/docs/Web/CSS/image-rendering
https://estar.tistory.com/69
https://developer.mozilla.org/ko/docs/Web/CSS/backface-visibility