Graphics aren't photos: where lossless wins

“Convert everything to AVIF” is good advice for photographs and quietly bad advice for everything else. A screenshot, a logo, a chart, a UI mockup, a line drawing — these are graphics, not photos, and the lossy codecs that make AVIF and JPEG so good at photos are the wrong tool for them.

Why lossy codecs fail on graphics

JPEG, WebP-lossy and AVIF are built for photographs: smooth gradients, natural texture, no hard edges. They work by discarding high-frequency detail the eye won’t miss in a photo. Point them at a graphic and that same machinery turns against you:

• Ringing on sharp edges. Text and icons are nothing but hard edges. Lossy transforms smear a halo of “mosquito noise” around every letter — the artifact JPEG has been known for since the 1990s, and it survives into modern codecs at hard edges.
• Banding on flat colour. A solid fill or a clean gradient is exactly what block-based quantization posterizes into visible steps.
• You pay to blur, then pay again. To hide those artifacts you push the quality up, and a lossy codec forced to near-lossless on a graphic is often larger than a purpose-built lossless one — while still not being exact.

A graphic has few colours and hard structure. The right move is to keep it exact and compress the redundancy, not to throw detail away.

The numbers, on real graphics

We ran the graphic set from our benchmark — 213 real graphics (logos, charts, UI, flat-colour art) — through the tools built for them, measuring the saving against the original PNG:

Lossless WebP cuts these graphics roughly in half and every pixel is identical. oxipng re-optimizes the PNG itself with no format change — safe everywhere. pngquant goes furthest by reducing the palette; on flat-colour art the result is visually indistinguishable, on a photo it would be a disaster. Which is the whole point: the tool has to match the content.

The rule: classify first, then compress

The mistake isn’t picking WebP or picking PNG. It’s picking one codec for everything. A pipeline that ships web images well has to look at each asset and decide what it is before deciding how to compress it:

• Photograph → lossy AVIF/WebP, quality targeted to a perceptual score (see our AVIF vs WebP vs JPEG numbers).
• Graphic with a photographic region (a screenshot of a photo) → the lossy path can still win.
• Flat-colour graphic, logo, chart, line art → lossless, and stay in a format the graphic actually needs.

This is what Patu does: it classifies each image and routes it. A graphic is kept lossless — re-encoded exactly, not blurred into a lossy format that’s both larger and worse. A photo gets the quality-targeted lossy search. Same endpoint, opposite treatment, because they’re opposite problems.

The headline advice survives with one word added: convert your photos to AVIF. Convert your graphics to the smallest lossless form. Sending both down the same pipe is how you end up with fuzzy logos and heavier files at once.

Method and data: the Patu benchmark harness over the graphic category (213 real graphics); savings are the median reduction against the original PNG, per tool. oxipng and lossless WebP are byte-exact; pngquant is lossy palette reduction, near-exact on flat-colour content.