(Almost) Every format claims to be the best. So I took one photo, pushed it through all of them at different settings and put the results next to each other. Click any image to open it and zoom in.

First question: can your browser even show all of these? The browser support test tells you. Formats your browser can’t decode are replaced by a lossless copy of the decoded image here, marked as decoded preview. So you still see exactly what the format produces.

The test image

This is the Black Dragon Pool in Lijiang, with the Jade Dragon Snow Mountain in the background. Apart from being one of my favourite photos, it is also a pretty mean test image:

  • Big blue sky gradients, which show banding very quickly.
  • Colour detail in the water, the trees and the reflections, which gets washed out by chroma subsampling.
  • Fine structure in the leaves, the rocks and the mountain, which is the first thing to get blurred or blocked away.
Image
3000 × 1180 px, 8-bit sRGB, original PNG 6.53 MB
Encoders
libjxl 0.11.1, libavif 1.3.0, libheif 1.21.2, libwebp 1.5.0, libjpeg-turbo 2.1.5, openjpeg 2.5.4
Generated
2026-09-23

The original was converted to 8-bit sRGB and scaled down, so every encoder gets the exact same input. All formats use 4:2:0 chroma subsampling where they have it, as is common on the web.

Compare them yourself

Pick any two versions, drag the handle to compare, and zoom in to see the pixels. The A and B buttons under every image below load it in here as well.

loading…
loading…
⟷
Drag to pan · scroll, pinch or double click to zoom · drag the handle to compare

Same file size

This is the fairest comparison: every format gets the same budget of bytes, and the highest quality setting that still fits is used. The first row is a tight budget, where the differences are huge. The second is a more typical budget for a big photo on a website.

At most 130 KB (0.3 bits per pixel)

At most 346 KB (0.8 bits per pixel)

The quality ladder

Each format from high to low quality. Note that the quality numbers are not comparable between formats. Every encoder maps “quality 50” to something different. Compare file sizes and what you see instead. JPEG 2000 has no quality setting at all, it gets a target compression ratio instead.

The percentage is the file size relative to the original PNG.

JPEG

WebP

AVIF

JPEG XL

HEIC

JPEG 2000

Lossless

Lossless means pixel perfect. So here the only interesting thing is the file size.

  1. JPEG XL5.05 MB
  2. JPEG 20005.25 MB
  3. WebP5.30 MB
  4. PNG6.53 MB
  5. AVIF6.78 MB
  6. HEIC7.03 MB