image-rendering & rendering hints
image-rendering controls how the browser interpolates pixels when an image is scaled to a size different from its natural dimensions. The default behavior smooths scaled images — useful for photos, but it actively ruins small pixel-art graphics scaled up, blurring their crisp intentional edges into mush. image-rendering lets you opt a specific image out of that smoothing.
The main values
Value | Behavior |
|---|---|
auto | Default. The browser chooses a smoothing algorithm (typically bilinear/bicubic) — good for photos, blurs pixel art when scaled up. |
pixelated | Scales using nearest-neighbor — hard, blocky edges with no smoothing. Makes small pixel-art images look crisp and intentional when enlarged. |
crisp-edges | Similar intent to pixelated (avoid blurring), but leaves the exact algorithm up to the browser. In practice, pixelated has the most consistent, predictable result across browsers. |
Worked example — scaling up a small sprite
/* An 8x8px pixel-art icon, displayed at 10x its natural size */
.sprite-smooth {
width: 80px;
height: 80px;
image-rendering: auto; /* default — browser smooths/blurs it */
}
.sprite-crisp {
width: 80px;
height: 80px;
image-rendering: pixelated; /* keeps hard, blocky pixel edges */
}<!-- Same source image, two different rendering treatments --> <img src="/sprites/coin-8x8.png" class="sprite-smooth" alt="Coin (blurred)" /> <img src="/sprites/coin-8x8.png" class="sprite-crisp" alt="Coin (crisp)" />
Both tags load the identical 8x8px source file, scaled to the same 80x80px display size. The sprite-smooth version renders as a soft, blurry blob — the browser tried to smooth eight pixels into eighty. The sprite-crisp version keeps every original pixel visible as a sharp 10x10px block, exactly what a retro game icon or pixel-art illustration is meant to look like scaled up.
When to use it
Reach for pixelated specifically when an image is deliberately low-resolution pixel art meant to read as blocky — game sprites, 8-bit style icons, favicon-style graphics blown up for display. For photographs, illustrations, or any image where smooth scaling is desirable, leave image-rendering at its auto default.