CSS image-rendering

The image-rendering property tells the browser which scaling algorithm to prefer when an image is resized. It is often used for pixel art, icons, QR codes and images that should stay sharp when enlarged.

Syntax

image-rendering: auto;
image-rendering: smooth;
image-rendering: crisp-edges;
image-rendering: pixelated;

Example

.pixel-art {
  width: 12rem;
  image-rendering: pixelated;
}

Result:

When to use it

Use auto for photos. Use pixelated or crisp-edges when blurring would hide important hard edges.