CSS image-rendering generator — sharp, blocky pixel art when you scale up

How to use the CSS image rendering generator

1. Choose an image-rendering value: pixelated, crisp-edges, auto or smooth.
2. Set the Upscale factor from 2× to 20× to see how the sprite behaves at different sizes.
3. Compare the two previews: auto (browser smoothing) on the left and your value on the right.
4. Copy the img.pixel-art rule and add class="pixel-art" to your images.

What it does and when to use it

image-rendering controls the scaling method a browser uses when an image is shown bigger or smaller than its real pixel size. The main reason to change it is pixel art: game sprites, retro icons and emoji-style graphics drawn at tiny sizes that need to stay blocky when enlarged. It also helps with QR codes, barcodes, charts saved as small PNGs and screenshots of pixel grids, where blur makes edges hard to read or scan.

To make the enlarged copy as a file, use the image resizer. For a deliberate blocky effect on a photo, try the image pixelate tool, and to fit the scaled image into a fixed box, the object-fit generator.

How it works

The output is a single rule:

img.pixel-art {
  image-rendering: pixelated;
}

For crisp-edges, the tool adds image-rendering: -moz-crisp-edges; above the standard line. The preview draws a built-in 16 × 16 pixel sprite at 16 × your factor, so 10× shows it 160 px wide.

MDN lists image-rendering as Baseline widely available since January 2020. The individual values each have their own row in MDN’s compatibility table, so check the value you choose there.

Worked examples

Retro game sprite. pixelated gives image-rendering: pixelated;. At 10×, each sprite pixel becomes a solid 10 × 10 px square, while the auto preview beside it is visibly soft.

Edge-preserving scaling. crisp-edges gives two lines:

image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;

Smooth scaling on purpose. smooth gives image-rendering: smooth;, which asks for the scaling method that makes the image look best. MDN describes this as maximising appearance; use it for photos and illustrations.

Limits and tips

• Use whole-number scales for pixel art (2×, 3×, 4×) so every source pixel becomes the same size.
• Downscaling is different. Shrinking pixel art with pixelated can drop whole rows of pixels; export smaller versions instead.
• Apply it only to images that need it. On photos, pixelated scaling looks jagged.