CSS로 background-image를 사용하거나 img 태그로 이미지를 넣었을 때 이미지가 뭉개지거나 흐릿하게 렌더링되는 현상이 발생할 때가 있습니다. (레티나 디스플레이에서는 발생하지 않습니다)

이 경우 웹킷 벤더를 붙여서 뚜렷하게 처리하는 방법을 쓸 수 있죠.

---

시작하기 전 안내 사항

이미지는 대개 블럭 형태로 사용합니다. 그래서 display: block을 추가했습니다.

---

코드 몇 줄이면 끝!

image-rendering: -webkit-optimize-contrast transform: translateZ(0) backface-visibility: hidden overflow: hidden display: block

image-rendering, transform, backface-visibility를 사용하면 border-radius가 동작하지 않습니다. border-radius 사용할 것을 대비하여 overflow: hidden 코드도 추가하세요

---

어차피 이미지에 위 코드를 전역적으로 설정해서 사용하는 게 좋으니 공통 sass/css 파일에 넣어서 사용하세요.