v149 · CSS · Image Rendering

Sprite Animator

Pixel art sprites must scale without blur. Compare auto (blurry), crisp-edges (sharp, new in Chrome 149), and pixelated (nearest-neighbor) side by side — animated so you see the aliasing behaviour in motion.

8×
Sprite: 16×16 pixel art character
FPS: — · Frame: 0
image-rendering: auto
Bilinear interpolation — soft, blurry edges
image-rendering: crisp-edges (Chrome 149)
No anti-aliasing — preserves sharp boundaries
image-rendering: pixelated
Nearest-neighbor — identical intent to crisp-edges

when to use each

/* Pixel art, game sprites, QR codes, icons
   intended for sharp pixel display: */
.sprite { image-rendering: crisp-edges; }   /* standard (Chrome 149) */
.sprite { image-rendering: pixelated; }      /* identical, widely supported */

/* Photos and illustrations that look better
   with smoothing at intermediate sizes: */
.photo { image-rendering: auto; }            /* default — bilinear */

/* crisp-edges was previously missing in Chrome;
   sites used -webkit-optimize-contrast as a prefix.
   Chrome 149 adds the standard property. */

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗