[CSS] img 사이즈 조절 시 흐려지는 현상

로고 등 보다 선명한 화질을 위해 웹사이트에 출력될 사이즈보다 큰 이미지를 삽입할 경우, css값으로 이미지를 축소시키면 이미지가 흐려보이는 현상이 있음.

 

해당하는 이미지의 렌더링 방식을  css에서 변경해주면 해결됨

img {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: crisp-edges;
}