Lpla 개발 블로그

HTML&CSS

[CSS] 크롬에서 이미지가 흐릴 때

크롬은 고질적인 이미지 랜더링 문제가 있다. 웹에 게시된 이미지 해상도가 원본 해상도와 일치한다면 문제없지만, 원본 해상도보다 확대 또는 축소되는 경우에 이미지가 눈에 띄게 흐려진다. 이것은 크롬 뿐만 아니라 다른 브라우저에서도 일어나는 현상이지만 유독 크롬에서 심하게 나타난다. 이 문제를 해결하기 위해 오랜 시간 찾아봤지만 아주 마음에 드는 해결책은 찾을 수 없었고 적정선에서 타협할만한 수준은 몇 가지 알 수 있었다. 1. image-rendering 이미지 랜더링 방식을 바꾼다. image-rendering: -webkit-optimize-contrast; 을 하게 되면 크롬, 사파리 등 브라우저에서 대비를 최적화하여 이미지 랜더링을 하는데 흐린 문제를 많이 해소해준다. 2. translateZ tr..