An encoder throws away the detail your eye skips, then packs what survives. The three differ in how hard they push each step.

JPEG (1992) cuts the photo into 8x8 blocks, runs a cosine transform, and rounds off the high-frequency parts. jpegli (Google, 2024) keeps the exact JPEG format but rounds smarter, so it fits roughly 25% more quality into the same bytes as the old mozjpeg encoder. AVIF borrows AV1's video tricks, larger blocks and sharper prediction, so it usually wins on bytes-per-pixel outright.

Right. jpegli stays inside the JPEG bitstream, so a browser from 1995 still decodes it. AVIF needs a modern decoder (Safari 16+, Chrome 85+). That trade, universal but larger against modern but smaller, is why the photo grid ships both and lets the browser pick.

Decode support and encode time. AVIF leans on the AV1 codec, which is slower to encode and only decodes on recent browsers. jpegli is fast and universal. That is why the site builds jpegli from source for the universal fallback and uses AVIF as the primary <picture> source: the browser reaches for AVIF, and anything that cannot decode it falls back to the jpegli .jpg.

A color image carries one luma plane (brightness) plus two chroma planes (color). Drop to grayscale and you delete both chroma planes, roughly two-thirds of the color information, so the file falls hard. The garage study has the side-by-side counts.

Right, chroma subsampling. Your eye resolves brightness far better than color, so codecs keep luma at full resolution and shrink the two chroma planes. 4:4:4 keeps everything; 4:2:2 halves chroma horizontally; 4:2:0, the web default, stores one chroma sample per 2x2 block, a quarter of the color resolution. The luma carries the sharpness, so you barely notice.

Exactly, and for photographs it is almost free, because real scenes rarely put fine high-contrast color edges right next to each other. Where it shows is red text on a dark background or saturated line art, which is why screenshots and graphics keep 4:4:4 while photos ship 4:2:0.

It models your eye instead of trusting the fixed 1992 quantization tables. jpegli works in the XYB color space, which spaces colors the way you perceive them, sets the quantization adaptively per block by what you would actually notice, and rounds with adaptive dead-zones. The output is still a standard JPEG that any decoder reads, but more bits land where your eye looks and fewer on detail you would never see. That is the rough 25% it gains over the old mozjpeg encoder.

Here is a 96-pixel detail crop, the car's body edge against the dark wheel, run through every encoder and blown up so the artifacts show. Start with format against quality.

Same crop, same quality knob, three encoders. The bytes under each tell the story.

The same crop as a JPEG at the three chroma samplings. Luma holds; the color is what softens.

Each thumbnail is dual-encoded: an AVIF primary and a jpegli JPEG fallback inside one <picture>, plus a 400px AVIF tier for phones. The browser loads the smallest format it can decode and never downloads the others.