PNG quantization: smaller graphics without sacrificing clean edges
Learn when an indexed palette, alpha preservation, and controlled dithering can reduce a PNG—and when lossless fallback is safer.
A normal PNG optimizer can rearrange or compress the same pixels more efficiently. Quantization goes further: it builds a smaller palette and maps the image to those colors. That can produce a much larger saving, but only when the palette still represents the design faithfully.
Why a palette can shrink a PNG
A full-color PNG can describe millions of possible RGB colors for every pixel. An indexed PNG instead stores a palette and a compact index for each pixel. If the artwork uses a modest number of visually important colors, that representation can be far more efficient.
Adaptive palette generation matters because the most frequent colors are not always the most important. A small accent, a one-pixel border, or anti-aliased text can carry more visual meaning than a large background. A useful quantizer considers the distribution of colors and the perceptual cost of merging them.
Transparency needs special care
Transparent PNGs contain color and alpha information. If a quantizer treats alpha as an afterthought, soft shadows can band and edge pixels can produce a light or dark halo when placed over a new background. The palette needs to preserve meaningful alpha levels along with visible color.
Test transparent outputs over both light and dark backgrounds. A result that looks correct against the checkerboard preview may still reveal an edge problem in the real layout. Keep the original asset until that placement test is complete.
Color limits and dithering
A lower color limit can reduce the file further, but it also increases the number of source colors that must share a palette entry. Flat artwork may work well with a small limit. Screenshots containing shadows, photos, or gradients usually need more colors.
Dithering alternates nearby palette colors to simulate a missing shade. It can smooth a gradient, yet it can also make a clean fill noisy and can soften tiny text. Start with a moderate setting, inspect the difficult regions, and reduce it when the design should remain crisp.
- Inspect text at 100% zoom, especially light text on a colored background.
- Check gradients for abrupt bands and flat areas for unwanted speckling.
- Place transparent assets over the backgrounds used in production.
- Compare bytes; do not accept palette reduction that produces no practical saving.
How Ziply handles the decision
Ziply’s PNG controls let you select a maximum palette size and dithering strength. Quantization runs locally in the Rust/Wasm path. The result can preserve alpha and produce an indexed candidate without sending the image to an optimization service.
The encoder also keeps a lossless path available. If quantization cannot produce a meaningful improvement safely, a lossless fallback is preferable to returning a worse result merely to claim that a feature ran. The queue reports which PNG mode produced the output so the decision remains visible.