이미지를 CSS로 확대하거나 축소할 때 화질이 뭉개지거나 계단 현상이 나타나는 경험을 해보셨을 것입니다. 이때 유용한 것이 바로 image-rendering 속성입니다. 이 속성은 브라우저가 이미지를 스케일링할 때 사용할 알고리즘을 지정하여, 상황에 맞는 최적의 이미지 품질을 유지할 수 있도록 도와줍니다.
image-rendering 속성이란?
image-rendering 속성은 이미지가 원본 크기와 다르게 표시될 때 픽셀을 어떻게 처리할지 결정합니다. 대표적인 값은 다음과 같습니다.
- smooth – 부드러운 보간 방식으로 자연스럽게 확대·축소합니다.
- pixelated – 픽셀 하나하나를 그대로 드러내어 레트로 감성의 픽셀 아트 느낌을 줍니다.
- crisp-edges – 이미지 가장자리를 선명하게 유지하여 흐릿함을 최소화합니다.
기본 문법
CSS image-rendering 속성의 기본 문법은 다음과 같습니다.
Selector {
image-rendering: /*value*/
}예제 1: 세 가지 렌더링 값 비교하기
다음 예제는 동일한 이미지에 smooth, pixelated, crisp-edges 값을 각각 적용해 결과를 비교합니다.
<!DOCTYPE html>
<html>
<head>
<style>
img {
height: 200px;
width: 200px;
}
#one {
image-rendering: smooth
}
#two {
image-rendering: pixelated
}
#three {
image-rendering: crisp-edges
}
</style>
</head>
<body>
<img id="one" src="https://images.unsplash.com/photo-1610208309350-766d71494a03?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
<img id="two" src="https://images.unsplash.com/photo-1610208309350-766d71494a03?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
<img id="three" src="https://images.unsplash.com/photo-1610208309350-766d71494a03?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
</body>
</html>위 코드를 실행하면 왼쪽부터 smooth, pixelated, crisp-edges가 적용된 결과를 확인할 수 있습니다.
예제 2: 둥근 형태의 이미지에 적용하기
border-radius와 padding을 함께 사용해 이미지 모양을 꾸민 후, 각 렌더링 값을 적용한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
img {
padding: 5%;
border-radius: 40%;
height: 20%;
width: 20%;
}
#one {
image-rendering: pixelated
}
#two {
image-rendering: smooth
}
#three {
image-rendering: crisp-edges
}
</style>
</head>
<body>
<img id="one" src="https://images.unsplash.com/photo-1611090093783-a629a4d9f1a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256" />
<img id="two" src="https://images.unsplash.com/photo-1611090093783-a629a4d9f1a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256" />
<img id="three" src="https://images.unsplash.com/photo-1611090093783-a629a4d9f1a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256" />
<br/>
pixelated, smooth, crisp
</body>
</html>실행 결과는 아래와 같습니다. 같은 이미지라도 어떤 렌더링 알고리즘을 적용하느냐에 따라 질감과 선명도가 확연히 달라지는 것을 볼 수 있습니다.
정리
사진처럼 자연스러운 이미지에는 smooth, 도트 게임이나 픽셀 아트 스타일에는 pixelated, 선명한 윤곽선이 중요한 아이콘이나 일러스트에는 crisp-edges를 사용하는 것이 좋습니다. 용도에 맞는 값을 선택하면 CSS만으로 이미지 품질 저하 없이 크기를 자유롭게 조절할 수 있습니다.