The formats that replaced JPEG, and the one that might

Why the newer formats are smaller

JPEG splits an image into fixed 8x8 blocks and transforms each one independently. That was a sensible design in 1992 and it leaves a great deal on the table.

WebP and AVIF are both built from video codecs (VP8 and AV1 respectively) and they bring the tricks video encoders use inside a single frame. The important ones:

• Variable block sizes. A flat sky is described with a few large blocks; a face gets small ones. JPEG spends the same 8x8 grid on both.
• Intra prediction. Before transforming a block, the encoder predicts it from the pixels already decoded above and to the left, in one of several directions, and only stores the difference. On a gradient or a smooth surface the difference is nearly nothing.
• Better entropy coding. Arithmetic coding rather than JPEG’s Huffman tables, which is a few more per cent for free.

The practical result at matched visual quality: WebP is typically 25 to 34 per cent smaller than JPEG, AVIF another 20 to 30 per cent smaller than WebP, with the gap widening at low bitrates and narrowing at high ones.

What each one is good and bad at

WebP. Lossy and lossless in one format, alpha in both, animation. Supported by every current browser since 2020 and by most tooling. Its lossy mode inherits VP8’s chroma handling and is always 4:2:0, so saturated red edges suffer the same fringing as JPEG. Its lossless mode is good on graphics and often beats PNG by 20 to 30 per cent.

AVIF. The best compression of the three at web sizes, real 10- and 12-bit support, alpha, wide gamut and HDR, animation. Two costs. Encoding is slow (seconds per image at high effort settings rather than milliseconds) and at aggressive settings it smooths rather than blocks. That is a more insidious failure than JPEG’s: fine grain, distant foliage and fabric weave quietly become flat, and the image looks clean rather than damaged. Always check a texture-heavy region at 100 per cent before committing a whole catalogue to AVIF.

JPEG XL. Technically the most interesting of the three. It can losslessly transcode an existing JPEG to roughly 80 per cent of its size, and turn it back byte-for-byte, so an archive of a million JPEGs can shrink by a fifth with nothing lost and nothing re-encoded. It supports progressive decoding properly, high bit depths and very high quality at low cost.

And its browser support is unsettled. Safari ships it. Chrome implemented it, removed it in 2023, and the argument about whether to restore it has run ever since; Firefox has kept it behind a flag. Any confident statement about where this lands is a guess. Check the current state before you rely on it, and do not build a delivery pipeline whose only output is JPEG XL today.

Encoder settings that matter

cwebp -q 78 -m 6 in.png -o out.webp
avifenc --min 0 --max 63 -a end-usage=q -a cq-level=28 -s 4 in.png out.avif
cjxl in.jpg out.jxl          # lossless transcode of an existing JPEG

Two things to understand in there.

Effort or speed settings are not quality settings. -m 6 in cwebp and -s 4 in avifenc tell the encoder to search harder for a better encoding. Higher effort means a smaller file at the same quality, paid for in seconds. For a one-off hero image, use the slowest setting. For 5000 thumbnails, do not.

Quality numbers do not transfer between formats. WebP 78 is not AVIF 78 is not JPEG 78. Each encoder has its own scale: AVIF’s cq-level even runs the other way, lower being better. The only way across is a perceptual measurement or your own eyes, which is the previous lesson.

Delivering more than one format

You do not have to choose one. The <picture> element lets the browser take the first source it understands:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" width="1200" height="800" alt="...">
</picture>

The JPEG stays as the floor. Anything that does not understand the newer types (an old email client, a scraper, somebody’s image-saving script) still gets a file that works.

Where the old formats are still right

• Anything a stranger will download and open in unknown software. A JPEG opens everywhere, including on a fifteen-year-old machine in an office you will never see.
• Print delivery. A lab or a press wants TIFF or JPEG. Sending AVIF to a print shop will get you a phone call.
• Editable archives. None of these are working formats. Keep the layered master.
• Email. Support across mail clients is far patchier than across browsers, and some gateways re-encode anyway.

Today: take one photograph with visible grain or foliage, export it as JPEG at your usual setting, then as WebP and AVIF at file sizes 30 per cent smaller, and compare the textured area at 100 per cent. You are looking for whether the AVIF has kept the grain or quietly painted over it.