[css 이슈] 크롬에서 이미지가 흐리게 보일 때 처리 방법(image-rendering)

원하는 영역에 배너나 이미지 썸네일을 넣게 될 경우에 정확한 사이즈의 이미지를 받아서 넣거나 2배, 3배와 같은 배수의 이미지를 받아서 넣는 경우 이미지가 흐려보이는 경우는 없겠지만 작업을 하다보면 내가 원하는 사이즈의 이미지를 넣을 수 없는 경우도 있다.

 

이미지를 원래의 사이즈 혹은 원본 사이즈의 배수에 해당하는 사이즈로 넣지 않을 경우 이미지가 흐려(blur) 보이는 경우가 많이 있는데 특히 크롬에서 이 현상이 더 심하게 보인다.

좌측은 이미지의 원본 사이즈를 그대로 놓은 것이고 우측은 원본 이미지를 축소해서 노출을 시킨 것이다.

 

한 눈에 보더라도 우측 이미지가 흐릿하게 보인다는걸 알 수 있다. 일반적인 이미지일 경우에 눈감아줄 수 있을 정도의 흐림인 경우도 있지만 텍스트가 들어간 이미지인 경우 흐린 효과가 더 부각되어 보인다.

 

이러한 현상을 해결하기 위해 css 처리가 필요하다.

 

1. image-rendering(이미지 랜더링 방식 변경)

image-rendering은 확대, 축소 된 이미지에만 적용이 되는 css 이다.

원본 이미지를 그 사이즈 그대로 사용하게 될 경우엔 css가 따로 적용되는 내용이 없지만 특정 이미지를 확대하거나 축소를 할 경우에 해당 css를 사용하면 효과를 발현한다.

.banner{
  image-rendering: -moz-crisp-edges; /* firefox */
  image-rendering: -o-crisp-edges; /* opera */
  image-rendering: -webkit-optimize-contrast; /* chrome(비표준) */
  image-rendering: crisp-edges;
}

crisp-edges는 이미지의 색상대조를 최적화하여 랜더링하게 만들어 흐리거나 번져보이는 효과를 많이 잡아줄 수 있다.

위와 같이 image-rendering을 사용하는데 우린 유독 흐림 효과가 심한 크롬에 적용할 목적이므로 -webkit-optimize-contrast를 적용한다.

 

2. translateZ

transform을 사용하여 이미지의 Z축을 0으로 초기화 시켜 입체감을 없앤다.

.banner{
  transform:translateZ(0);
}

 

3. backface-visibility

backface-visibility는 요소의 뒷면을 보여줄 것인지 보여주지 않을 것인지를 정하는 css이다.

.banner{
  backface-visibility:hidden;
}

위와 같이 이미지의 뒷면을 hidden처리하여 보이지 않게, 입체감이 없게 처리할 수 있다.

 

 

4. 정리

.banner{
  image-rendering:-webkit-optimize-contrast;
  transform:translateZ(0);
  backface-visibility:hidden;
}

해당 3가지 css를 사용하면 위 이미지 예시처럼 보다 뚜렷한 이미지를 얻을 수 있다.

 

물론 가능하다면 위 css를 사용하는 일 없이 영역에 맞는 사이즈의 이미지를 가져와서 사용한다면 더할나위 없이 좋을 것이다.

 

 

---

참조

https://intrepidgeeks.com/tutorial/chrome-image-blur

https://lpla.tistory.com/139

https://developer.mozilla.org/ko/docs/Web/CSS/backface-visibility