image-rendering
Controls the scaling algorithm used when images are enlarged/reduced. irpe(pixelated) is for pixel art, irce(crisp-edges) is for when sharp boundaries are needed.
Class List
| Class | CSS | Description |
|---|---|---|
irn | image-rendering: auto | Browser default algorithm (smooth interpolation) |
irpe | image-rendering: pixelated | Pixels scaled sharply (for pixel art) |
irce | image-rendering: crisp-edges | Keeps edges crisp (for QR codes, blueprints) |
Live Demo
One and the same 8x8 pixel PNG, blown up to 160x160, a 20x enlargement. The only difference between the three is the scaling algorithm.
auto (default value) —irn
The browser selects the optimal algorithm. Usually smooth interpolation (bilinear, etc.) is applied.
pixelated — irpe
Pixels are enlarged as-is when scaled up. Sharp pixels are maintained without blur, suitable for pixel art and retro game graphics.
crisp-edges — irce
Boundaries are kept sharp. Suitable for images where sharp edges are important, such as QR codes, barcodes, blueprints, etc.
pixelated and crisp-edges are implemented differently per browser, so on some engines the two can look identical.
<!-- 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="" />Class Details
irnimage-rendering: auto
The default. The browser applies smooth interpolation on its own, which is the right answer for photographs and ordinary imagery: edges soften when scaled up and aliasing is reduced when scaled down.
<!-- Photographs: let the browser smooth the resample -->
<img src="photo.jpg" class="irn w100p" alt="Photo" />irpeimage-rendering: pixelated
Scales with nearest neighbor, so square pixels simply become bigger squares. Its behaviour is specified precisely, making it the only predictable choice for pixel art, retro graphics, and zoomed previews.
<!-- 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
Asks for an algorithm that preserves edges, but leaves the choice of algorithm to the browser. Results therefore differ between engines: Chromium treats it much like pixelated, while others may still smooth the image.
<!-- QR code: keep the modules square and readable by scanners -->
<img src="qr.png" class="irce w20rem h20rem" alt="QR code" />pixelated versus crisp-edges
irpe has defined behaviour (nearest neighbor), while irce only requires that edges be preserved and leaves the method open. Use irpe when you need the result to be exact.
Usage Examples
Controls rendering quality when displaying images larger than their original size.
<!-- 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" />Screens that display small sprites at large sizes, such as a retro game asset browser, are the classic use case.
<!-- 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" />Tips and Pitfalls
auto is optimal for photos
Regular photos look most natural with the default (auto). Use pixelated or crisp-edges only for special cases.
pixelated only matters when scaling up
When images are at original size or reduced, there is almost no difference between rendering methods.
Stick to integer scale factors
Blowing pixel art up by an awkward factor like 2.7 makes some pixels wider than others. Display it at 2x, 4x, or 8x so the grid stays even.
It applies to canvas and backgrounds too
The property affects canvas elements, background images, and SVG image elements, not just img. Note that a canvas also has its own imageSmoothingEnabled flag, which you may need to turn off as well.