Is AVIF the New King of Web Image Compression? A Deep Dive

Why AVIF Matters Now

AVIF is an open‑source image format derived from the AV1 video codec. It is already supported in Chrome 85, with Android and Firefox working on support, and Safari expected to follow soon because Apple is a founding member of the AV1 alliance.

Dynamic vs. Static Image Compression Comparison

The author chose a photo mixing static scenery (road) and dynamic elements (cars) to illustrate compression differences.

In acceptable quality ranges, WebP is roughly half the size of JPEG, while AVIF is less than half the size of WebP, often around 18 KB for the test image.

What Is “Acceptable Quality”?

If compression introduces visible distortion or major artifacts, it is unacceptable; minor edge imperfections are tolerable.

Loss of detail is acceptable unless the detail is critical to the image’s purpose.

Image purpose matters: artistic inspection demands higher fidelity, while typical web images can tolerate more compression.

Technical Approach

The author used Squoosh to push images to extreme compression settings, manually tweaking codec parameters for “effort=best”. Visual inspection, not algorithmic metrics, guided the evaluation, acknowledging human visual bias.

Feedback from expert Kornel Lesiński highlighted that JPEG’s DDSIM scores were misleading; true quality aligns more with visual perception.

F1 Racing Photo Comparison

When compressed to ~18 KB, AVIF preserves smooth surfaces and reduces grain compared to JPEG, which shows blocky artifacts below 74 KB. WebP performs better than JPEG but still lags behind AVIF.

Flat Illustration Compression Comparison

Using a colorful illustration by Stephen Waller, the author reduced the palette to 68 colors before compression. AVIF’s lossless mode handled the bright colors and sharp lines well, though it cannot match SVG’s scalability.

Why Not Fully Lossless?

The author deliberately lowered color depth because lossy compression performs poorly on such illustrations; lossless AVIF still produces a slightly smaller file than SVG.

Gradient Image Compression Comparison

A gradient‑rich illustration shows that while JPEG suffers severe banding below 80 KB, WebP handles it better, and AVIF delivers vivid colors with minimal size (around 12 KB), albeit with a slight loss of geometric precision.

Is AVIF the Champion?

Initially skeptical, the author now acknowledges AVIF’s impressive compression ratios, though it isn’t perfect. AVIF excels for small‑to‑medium web images, while larger images may benefit from progressive loading tricks.

Encoding Time

Encoding AVIF can be slow, especially in Squoosh’s WebAssembly implementation, which lacks SIMD and multithreading. “Best‑effort” level 2 encodes in seconds; level 10 can take over ten minutes per image.

<code>brew install joedrago/repo/avifenc</code>

Rust’s

cavif

is another option. The author’s workflow mixes Squoosh for quick previews and libavif for final high‑quality encodes.

Decoding Time

Decoding AVIF currently lags behind JPEG/WebP on CPUs, though hardware acceleration is emerging for the AV1 video codec, which may eventually benefit AVIF.

What About JPEG‑XL and WebP v2?

JPEG‑XL promises lossless superiority and progressive multi‑pass rendering but isn’t yet ready for production. WebP v2 remains under development, so developers should monitor progress.

Conclusion

AVIF offers dramatic size reductions (e.g., 96 KB vs. 249 KB JPEG for a high‑resolution photo) and generally superior visual quality at comparable file sizes. For most web use‑cases, AVIF is a strong candidate, though fallback strategies (e.g., using PNG or SVG for certain graphics) remain valuable.