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