Images
image-rendering
image-rendering tells the browser whether to favor smoothness or crispness when an image is drawn larger or smaller than its size. Use it to scale up pixel art or QR codes without blurring them.
Syntax
auto | smooth | high-quality | pixelated | crisp-edgesPreview
Presets
Drag the bottom-right corner to resize
Code
.box {
background-image: url(/pixel-sample.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
image-rendering: pixelated;
}Controls
image-renderingpixelated
About
What the values mean
auto: left to the browser. This is the initial value. Browsers usually blend colors to scale smoothly, so a small image enlarged a lot looks blurry.smooth: favors smoothness, as for photos. Only Firefox supports it.pixelated: keeps the pixels square. For each axis, the image is enlarged to the nearest whole multiple of its natural size by repeating pixels (nearest neighbor), and only the remainder is scaled smoothly.crisp-edges: keeps edges and contrast, without blending colors or blurring. It is meant for line art, and the browser picks the algorithm. Chrome and Edge support it from version 148.
The preview here scales a 12×12 pixel-art image up to fill the box with background-size: contain.
Which images it affects
It applies to every image of the element: the content of <img> and <canvas>, as well as background images and list marker images. It is inherited, so setting it on a parent covers the images inside.
Watch out
- At an image’s natural size, every value looks the same. The difference only shows when the image is scaled.
- The spec also has
high-quality, likesmoothwith a stronger preference for quality, but no browser supports it yet, so this page leaves it out.