v149 · CSS · demo

Scaling Compare

Pick two rendering modes and a scale factor. Compare any combination — crisp-edges (new in Chrome 149) against auto, smooth, or pixelated.

Left panel
Right panel
Scale 12×
12×
crisp-edges (Chrome 149+)
smooth
/* image-rendering interoperability — Chrome 149 adds crisp-edges */
img, canvas {
  image-rendering: auto;         /* browser default */
  image-rendering: smooth;       /* bilinear interpolation */
  image-rendering: pixelated;    /* nearest-neighbour (strict) */
  image-rendering: crisp-edges;  /* preserve edges, avoid blur (Chrome 149+) */
}

see also

implementation reference

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