image-rendering
이미지가 확대/축소될 때 사용하는 스케일링 알고리즘을 제어합니다. irpe(pixelated)는 픽셀 아트에, irce(crisp-edges)는 선명한 경계가 필요할 때 사용합니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
irn | image-rendering: auto | 브라우저 기본 알고리즘 (부드러운 보간) |
irpe | image-rendering: pixelated | 픽셀이 각지게 확대 (픽셀 아트용) |
irce | image-rendering: crisp-edges | 경계를 선명하게 유지 (QR 코드, 도면용) |
사용 예시
이미지를 원본보다 크게 표시할 때 렌더링 품질을 제어합니다.
<!-- 픽셀 아트 확대 -->
<img src="pixel-art.png" class="irpe w20rem h20rem" alt="픽셀 아트" />
<!-- QR 코드 선명하게 -->
<img src="qr-code.png" class="irce w15rem h15rem" alt="QR 코드" />
<!-- 일반 사진 (기본값) -->
<img src="photo.jpg" class="irn w30rem" alt="사진" />렌더링 방식 비교
auto (기본값) — irn
브라우저가 최적의 알고리즘을 선택합니다. 보통 부드러운 보간(bilinear 등)이 적용됩니다.
pixelated — irpe
확대 시 픽셀이 그대로 커집니다. 블러 없이 각진 픽셀이 유지되어 픽셀 아트, 레트로 게임 그래픽에 적합합니다.
crisp-edges — irce
경계가 선명하게 유지됩니다. QR 코드, 바코드, 도면 등 선명한 경계가 중요한 이미지에 적합합니다.
팁 & 주의사항
사진에는 auto가 최적
일반 사진은 기본값(auto)이 가장 자연스럽습니다. pixelated나 crisp-edges는 특수한 경우에만 사용하세요.
pixelated는 확대 시에만 의미 있음
이미지가 원본 크기이거나 축소된 경우에는 렌더링 방식의 차이가 거의 없습니다.