Why render live?

Dithering uses a small set of colors to suggest a much wider range of shades. The placement of those colored pixels creates the tones and detail you see. That makes the size of the pattern part of the image.

A photograph can usually be resized smoothly by blending neighboring pixels. With a dithered image, that blending can introduce colors outside the palette, soften the dots, or create uneven patterns. You can see this in the comparison above: the exported PNG keeps its original 320-pixel pattern as its display size changes.

Render for the size on screen

dither·to starts with the original image, resizes it to the current display width, and builds a fresh dither pattern. Each time the layout changes, the pattern is recalculated for the space available. Crisp pixel rendering keeps the chosen palette colors distinct.

The middle image above does this live. The right-hand image is a fixed export using the same Atkinson algorithm, palette, and tone settings. At its intended size, that export can look right too. Live rendering is useful when an image needs to adapt to different screen sizes and layouts.

What about pixelated CSS?

The image-rendering: pixelated setting preserves hard color edges when an image is scaled. It still enlarges or shrinks the existing pattern. Try the checkbox above to see how that compares with rebuilding the pattern at the new size.

This demo renders one image pixel per CSS pixel of width. Screen density and browser zoom affect how that grid maps to physical pixels.