v149 · CSS · demo
Pixel Art Gallery
All four image-rendering values applied to the same 8×8 pixel-art canvas, upscaled to 128px. See the difference — crisp-edges is new in Chrome 149.
Scale:
16×
The source image is an 8×8 canvas rendered at 1:1. All rendering differences come from CSS
image-rendering alone.
auto
smooth
pixelated
crisp-edges (Chrome 149+)
/* All four values side by side */
.auto { image-rendering: auto; }
.smooth { image-rendering: smooth; }
.pixelated { image-rendering: pixelated; }
.crisp-edges { image-rendering: crisp-edges; } /* Chrome 149+ */
/* Typical pixel-art use case */
.pixel-art {
width: 256px; /* 16× a 16×16 source */
height: 256px;
image-rendering: crisp-edges; /* or pixelated */
}see also
- Scaling Compare — interactive scale factor slider
- Back to feature index
- ChromeStatus entry
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗