image-rendering chooses the scaling algorithm for an image. pixelated is suitable when enlarged source pixels should remain visibly square. It does not change image dimensions in the file, remove bytes from the transfer, or improve a blurry photograph. Scoping matters because the property can be inherited by descendant images.
Make this comfortable
CSS image-rendering: preserve a pixel map’s hard edges
When to use it
A dispatch dashboard includes a 32-by-32 status map that is intentionally drawn on a pixel grid. The map is displayed at 192-by-192 CSS pixels, an integer sixfold enlargement, so pixelated rendering preserves the original cells. Its neighboring photographic evidence retains ordinary interpolation. Include actual image dimensions in HTML to reserve space, and write alt text describing the map's meaning rather than its texture. Test the image at browser zoom levels that make the effective scale noninteger; edge treatment can vary and may not look as crisp as the nominal sixfold case. If the graphic contains small text, produce a larger source image instead of relying on nearest-neighbor scaling. High-density screens and print output also deserve inspection. A pixelated image is a design choice for discrete graphics, not a blanket performance optimization. Serve an appropriately sized source when visual detail matters.
.dispatch-map__raster { inline-size: 12rem; block-size: 12rem; image-rendering: pixelated; }
.dispatch-photo { max-inline-size: 100%; block-size: auto; image-rendering: auto; }Cost and verification
The rendering hint is cheap, but an oversized decoded bitmap still consumes memory and network bandwidth. The 32-by-32 source shown here is small; the 192-by-192 display size changes presentation only. Keep the rule on the specific raster instead of a container, or other descendant images may inherit the pixel treatment. Check zoom and device scale because integer CSS scaling does not guarantee integer device-pixel scaling. If users must inspect fine evidence, provide the proper resolution and an accessible description. A pixelated thumbnail cannot reconstruct detail that the source never contained.
Common Mistakes
- Do not apply pixelated to photographs or all images in a card.
- Do not assume image-rendering reduces transfer size.
- Do not expect perfect square pixels at every zoom level.
Connected lessons
css
reference
web