[css] 모바일 이미지 흐림 해결

간혹 퍼블리싱을 하다가 이미지태그 및 백그라운드 이미지 설정 시 이미지 폰트가 흐려보이는 현상이 발생한다.

1. <img src="images/image.png" class="img" alt="이미지예">

.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;
}

2. background-image로 이미지를 넣었을 경우 : style="background-image: url('../images/');"

.해당 백그라운드가 있는 태그 or 그 부모 {
	-ms-interpolation-mode: nearest-neighbor;
	image-rendering: pixelated;
}

해당 스타일은 주의해서 사용해야한다. 자칫하면 이미지 퀄리티가 떨어져 보일 수도 있고, 브라우저 마다 표현되는 희미함이나 샤프함이 다르기 때문이다.

😊