v149 · CSS

image-rendering: crisp-edges

Scale images without blur: crisp-edges preserves hard contrast boundaries and sharp edges when upscaling — the standard value Chrome was missing while pixelated was available.

concepts

  1. Pixel Art Gallery

    CSS-drawn pixel art scaled up with all four image-rendering values side-by-side. See exactly how auto, smooth, pixelated, and crisp-edges differ at large scale factors.

  2. Scaling Compare

    A live slider to pick any scale factor from 1× to 20× across all rendering modes. Compare how each mode handles different source images — gradients, sharp lines, and pixel art.

  3. Sprite Animator

    An animated 16×16 pixel art character rendered side-by-side with auto, crisp-edges, and pixelated. Adjust scale from 1× to 16× and watch the aliasing behaviour in motion at 8 FPS.

  4. Canvas Rendering

    image-rendering applies to <canvas> elements too. Draw a pattern at native resolution, then CSS-scale the canvas and compare how auto, smooth, crisp-edges, and pixelated affect the scaled output. Four source patterns — pixel art face, checker, lines, and step gradient.

  5. Icon Set Comparison

    A 16×16 icon displayed at four sizes (16, 32, 64, 128 px) across all four image-rendering values. Choose from four icon styles and scan the grid to see where crisp-edges shines and how it differs from pixelated at each scale.

  6. CSS Background Rendering

    image-rendering applies to background-image too — not just <img> elements. Four tiny SVG tiles repeated as a background and scaled up via background-size. All four rendering modes side by side with a scale slider (1×–20×) and four pattern choices — checker, arrows, grid, and noise. Essential for pixel-art game UIs using CSS tiled backgrounds.

why it shipped

CSS has long offered image-rendering: pixelated for nearest-neighbour scaling (the blocky pixel-art look), and image-rendering: auto (browser-chosen, usually bilinear). The CSS specification also defines crisp-edges, which targets the middle ground: preserve sharp contrast and edges, avoid smoothing, but don't force strict nearest-neighbour. Firefox and Safari had already shipped crisp-edges; Chrome shipped only pixelated. With Chrome 149, crisp-edges is now supported — closing the interoperability gap and giving developers a standards-compliant way to request crisp scaling without mandating the specific nearest-neighbour algorithm.

references

implementation reference

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