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) |
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" />Rendering Method Comparison
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.
Tips & Notes
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.