[CSS] image-rendering

MDN
image-rendering CSS 프로퍼티는 브라우저의 이미지 스케일링 방식에 대한 힌트를 제공합니다. 이 프로퍼티는 엘리먼트 자신에게 적용시킵니다. 스케일링(크기변경)이 안 된 이미지에게는 적용되지 않습니다.

예를들어, 100x100 픽셀의 이미지가 있는데 페이지에서 요구하는 이미지는 200x200픽셀 (혹은 50x50px)이라면, 이미지는 새로운 면적만큼의 특정 알고리즘으로 인해 확대(혹은 축소)됩니다. 스케일링은 사용자의 상호작용(줌기능) 으로 인해 일어날겁니다.

원본 이미지보다 이미지가 확대되거나 축소될 때이미지가 흐릿해진 경우 이미지 랜더링 방식을 변경하여 좀 더 뚜렷하게 보여준다.

image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

/* 사용 예시 */
div {
	background: url(chessboard.gif) no-repeat 50% 50%;
	image-rendering: -moz-crisp-edges;         /* Firefox */
	image-rendering:   -o-crisp-edges;         /* Opera */
	image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

참고
https://developer.mozilla.org/ko/docs/Web/CSS/image-rendering