v149 · css · covered on mdn
image-rendering: crisp-edges
Chrome 149 adds support for the crisp-edges value of the image-rendering CSS property — previously Chrome only supported pixelated for pixel-art scaling. crisp-edges is the interoperable, non-vendor-prefixed keyword for nearest-neighbour scaling that preserves contrast and hard edges without colour blending.
this feature is documented on MDN
MDN: image-rendering
MDN has a full reference page for the image-rendering property including all values, the difference between crisp-edges and pixelated, browser compatibility, and examples. gendn doesn't duplicate that here.
quick reference
| Property | image-rendering: crisp-edges |
|---|---|
| Effect | Scales images using nearest-neighbour (or equivalent) algorithm, preserving hard edges and contrast without blurring or colour smoothing. Intended for pixel art and line drawings. |
vs. pixelated | Both use nearest-neighbour in practice. crisp-edges is the standardised keyword; pixelated differs subtly in spec language but browsers treat them identically for raster images. |
| Shipped in | Chrome 149 (previously only pixelated was supported) |
| ChromeStatus | 5172217778405376 — image-rendering: crisp-edges |
| Spec | CSS Images Level 3 — image-rendering |