JPEG XL vs AVIF

AVIF is a still frame from the AV1 video codec. Video codecs are optimised for delivering acceptable quality at low bitrates across enormous volumes of content, and AVIF inherits that: it is exceptional at making small files that still look coherent.

JPEG XL was designed as an image format from the start, by the committee that produced JPEG. Its priorities are high-fidelity photography, lossless storage, fast encoding and a migration path from the billions of existing JPEGs.

So they are strongest in different places, and comparisons that pick a single bitrate and declare a winner are mostly revealing which end of the range they measured.

AVIF wins at aggressive compression, where it stays usable at bitrates that visibly break other formats. It also has 10- and 12-bit depth and HDR, and its browser support is broad enough to deploy today.

JPEG XL wins at high quality and lossless, encodes an order of magnitude faster, supports progressive decoding, and can losslessly repack an existing JPEG about 20% smaller with full reversibility — a capability nothing else has.

If you are producing thumbnails and heavily compressed hero images, AVIF. If you are storing a photographic archive or serving high-fidelity images, JXL would be the better format — if you could use it.

AVIF is decoded by Chrome, Firefox, Edge, Opera and Safari. It is deployable today behind a <picture> fallback and needs no argument.

JPEG XL is shipped by Safari. Chrome implemented it behind a flag and then removed it; Firefox keeps its implementation disabled. The situation has shifted more than once and remains contested, so check current support rather than trusting any snapshot — but as things stand, JXL cannot be served to most visitors.

That is not a judgement about which format is better engineered. It is simply what determines which one you can use.

These tools encode through the browser's canvas, which offers neither format. Chrome and Firefox cannot write AVIF, and no mainstream browser can write JPEG XL.

Worse, a canvas asked for a format it cannot produce silently returns a PNG — so a page offering either would hand most visitors a mislabelled file. The tools here probe what your browser can genuinely encode and disable anything it cannot. For AVIF or JXL output, use avifenc, cjxl, Squoosh or ImageMagick.