image-rendering
이미지가 확대/축소될 때 사용하는 스케일링 알고리즘을 제어합니다. irpe(pixelated)는 픽셀 아트에, irce(crisp-edges)는 선명한 경계가 필요할 때 사용합니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
irn | image-rendering: auto | 브라우저 기본 알고리즘 (부드러운 보간) |
irpe | image-rendering: pixelated | 픽셀이 각지게 확대 (픽셀 아트용) |
irce | image-rendering: crisp-edges | 경계를 선명하게 유지 (QR 코드, 도면용) |
시각 데모
똑같은 8x8 픽셀 PNG 하나를 160x160으로, 즉 20배로 확대한 것입니다. 세 이미지의 차이는 스케일링 알고리즘뿐입니다.
auto (기본값) — irn
브라우저가 최적의 알고리즘을 선택합니다. 보통 부드러운 보간(bilinear 등)이 적용됩니다.
pixelated — irpe
확대 시 픽셀이 그대로 커집니다. 블러 없이 각진 픽셀이 유지되어 픽셀 아트, 레트로 게임 그래픽에 적합합니다.
crisp-edges — irce
경계가 선명하게 유지됩니다. QR 코드, 바코드, 도면 등 선명한 경계가 중요한 이미지에 적합합니다.
pixelated와 crisp-edges는 브라우저마다 구현이 달라, 엔진에 따라 두 결과가 같아 보일 수도 있습니다.
<!-- One 8x8 source image, blown up to 160x160 three ways -->
<img src="sprite.png" class="irn w16rem h16rem" alt="" />
<img src="sprite.png" class="irpe w16rem h16rem" alt="" />
<img src="sprite.png" class="irce w16rem h16rem" alt="" />클래스별 상세
irnimage-rendering: auto
기본값입니다. 브라우저가 알아서 부드러운 보간을 적용하므로 사진과 일반 이미지에는 이 값이 정답입니다. 확대하면 픽셀 경계가 흐려지고, 축소하면 계단 현상이 줄어듭니다.
<!-- Photographs: let the browser smooth the resample -->
<img src="photo.jpg" class="irn w100p" alt="Photo" />irpeimage-rendering: pixelated
픽셀을 가장 가까운 이웃(nearest neighbor)으로 확대해 네모난 픽셀을 그대로 키웁니다. 결과가 명확히 정의되어 있어 픽셀 아트·레트로 그래픽·확대 미리보기에서 예측 가능한 유일한 값입니다.
<!-- Game sprite shown at 8x with hard pixel edges -->
<img src="sprite.png" class="irpe w32rem h32rem" alt="Sprite" />
<!-- Zoomed crop in an image inspector -->
<canvas class="irpe w40rem h40rem br8px"></canvas>irceimage-rendering: crisp-edges
경계를 뭉개지 않는 알고리즘을 쓰되, 어떤 알고리즘인지는 브라우저에 맡깁니다. 그래서 결과가 엔진마다 다르며, Chrome 계열은 사실상 pixelated처럼, 다른 엔진은 부드럽게 처리하기도 합니다.
<!-- QR code: keep the modules square and readable by scanners -->
<img src="qr.png" class="irce w20rem h20rem" alt="QR code" />pixelated와 crisp-edges의 차이
irpe는 nearest neighbor로 동작이 규정되어 있고, irce는 경계 보존만 요구할 뿐 알고리즘이 자유입니다. 결과를 확실히 통제해야 한다면 irpe를 쓰세요.
사용 예시
이미지를 원본보다 크게 표시할 때 렌더링 품질을 제어합니다.
<!-- 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" />레트로 게임 에셋 목록처럼 작은 스프라이트를 크게 보여주는 화면이 대표적인 사용처입니다.
<!-- Retro game asset browser: thumbnails must stay crunchy at any
zoom level, while the cover photo stays smooth -->
<section class="df fww gap16px">
<figure class="w12rem m0">
<img src="/sprites/hero.png" class="irpe w100p ara1-1 bg18181B br8px" alt="Hero sprite" />
<figcaption class="fs12px c71717A mt8px">hero.png — 16x16</figcaption>
</figure>
<figure class="w12rem m0">
<img src="/sprites/slime.png" class="irpe w100p ara1-1 bg18181B br8px" alt="Slime sprite" />
<figcaption class="fs12px c71717A mt8px">slime.png — 16x16</figcaption>
</figure>
</section>
<!-- Barcode on a printable receipt -->
<img src="/barcode.png" class="irce w100p h6rem" alt="Order barcode" />팁 / 주의사항
사진에는 auto가 최적
일반 사진은 기본값(auto)이 가장 자연스럽습니다. pixelated나 crisp-edges는 특수한 경우에만 사용하세요.
pixelated는 확대 시에만 의미 있음
이미지가 원본 크기이거나 축소된 경우에는 렌더링 방식의 차이가 거의 없습니다.
확대 배율은 정수로 맞추세요
픽셀 아트를 2.7배처럼 어중간하게 키우면 픽셀 폭이 들쭉날쭉해집니다. 2배, 4배, 8배처럼 정수 배율로 표시해야 격자가 고르게 보입니다.
canvas와 배경 이미지에도 적용됩니다
이 속성은 img뿐 아니라 canvas, background-image, SVG의 image 요소에도 적용됩니다. 다만 canvas의 경우 imageSmoothingEnabled는 별개이므로 필요하면 함께 꺼야 합니다.