CSS image-rendering Property

The image-rendering property tells the browser which algorithm to use when scaling an image up or down from its original size.

selector { image-rendering: value; }

auto	The browser uses its default scaling algorithm, which typically balances speed and visual smoothness.
smooth	The image is scaled using an algorithm that blends colors together to create a soft, non-jagged appearance.
high-quality	The browser prioritizes visual fidelity over rendering speed when scaling the image.
pixelated	The image is scaled using the nearest-neighbor algorithm, which maintains sharp, blocky edges without blurring.
crisp-edges	The browser preserves contrast and sharp edges in the image, specifically avoiding smoothing or blurring.

Code Examples

A basic example showing how to scale a small pixel art sprite to a larger size while keeping the edges sharp.

<img src="pixel-sprite.png" alt="Hero" style="width: 200px; image-rendering: pixelated;">

An advanced approach using JavaScript to dynamically scale an image and apply sharp rendering to ensure a barcode remains scannable.

<div id="ui-box">
  <img id="dynamic-asset" src="barcode.png" style="width: 100px; display: block; margin-bottom: 10px;">
  <button onclick="setSharpness()">Maximize Sharpness</button>
</div>

<script>
function setSharpness() {
  const img = document.getElementById("dynamic-asset");
  img.style.width = "400px";
  img.style.imageRendering = "pixelated";
  console.log("Asset scaled and rendering set to: " + img.style.imageRendering);
}
</script>

Pro Tip

If you are building a retro-style web game, apply "image-rendering: pixelated;" to your canvas element. This allows you to render the game at a tiny resolution for performance, then scale it up to fill the screen while keeping that sharp, nostalgic look without any extra JavaScript overhead.

Deep Dive

When you display an image at a size different from its natural dimensions, the browser has to fill in the blanks. By default, it uses a "digital airbrush" approach called bilinear interpolation to smooth everything out. This is great for family photos but makes pixel art look like a blurry mess. By setting image-rendering to "pixelated", you tell the browser to use a "nearest-neighbor" calculation. This means it just replicates the existing pixels to fill the space, keeping the edges hard and the details sharp. It is the difference between a soft, smeared look and a crisp, blocky aesthetic.

Best Practices

Only use "pixelated" or "crisp-edges" when sharp lines are an intentional part of the design, such as for QR codes, barcodes, or 8-bit style graphics. For standard photography or complex gradients, leave it at "auto" or use "smooth" to avoid jarring, jagged edges that look like a mistake to the average user.

Common Pitfalls

Don't expect this property to work if the image is being displayed at its actual 1:1 pixel size; it only kicks in when the image is scaled. Also, be careful with "crisp-edges" support, as different browser engines have historically preferred either "pixelated" or specialized prefixed values to achieve the same result.

Accessibility

If your image contains important text or data, like a chart, using "pixelated" can prevent the text from becoming unreadable soup when a user zooms in. Always ensure that the scaling method you choose maintains enough clarity for the user to understand the content of the image.

Dev Data Table: image-rendering property

default	auto
animatable	no
inherited	yes
experimental	no
year_intro	2012
year_standard	2014
js_syntax_1	document.getElementById("myImage").style.imageRendering = "pixelated";
js_syntax_2	document.getElementById("myImage").style.setProperty("image-rendering", "crisp-edges");
js_note	When using this property in JavaScript, be aware that older versions of Firefox and Safari may have required vendor-prefixed values like "-webkit-optimize-contrast".
browsers	{ "Chrome": 41, "Edge": 79, "Firefox": 93, "Safari": 6, "Opera": 28, "Chrome Android": 41, "Safari on iOS": 6, "Samsung Internet": 4, "Opera Mobile": 28 }