Colour banding of WebP & AVIF

WebP has been promoted as the next-generation image format (for ten years!), and then its powerful competitor AVIF comes. Do they work as excellent as people’s expectations? Unfortunately, colour banding happens on both of the new image formats.

I did some experiments to the artwork 🔞Reconquest at Night (dry and opaque) by converting it to WebP and AVIF, and the original file format is PNG.

  • PNG: Lossless
  • WebP: Lossy, quality 100
  • AVIF: Lossy, minimal quantiser 1/maximum quantiser 3

Quality 100 is the highest for lossy WebP, and the file size of lossy AVIF in this experiment is the closet to the WebP result when the maximum quantiser is 3 for AVIF (the higher the worse). I use cwebp and avifenc for converting.

The following results are converted to PNG for compatibilities. AVIF is converted via avifdec.

PNG (8,075,251 bytes)
WebP (1,049,562 bytes)
AVIF (1,016,987 bytes)

Even at the highest quality, the lossy WebP image is inevitably plagued by well-defined colour banding over the low-contrast area. There is colour banding on the lossy AVIF image too, but it is not at the highest quality and the result is much better.

While AVIF is the absolute winner in this test, only Google Chrome version 85 or higher can display AVIF images correctly. As of today, Firefox 80 can display AVIF by turning on the flag, but it becomes too dark. After 10 years, Safari finally supports WebP on iOS 14, iPadOS 14 and macOS Big Sur. I do hope that all major operating systems could support AVIF as soon as possible, for Apple and Microsoft are founding members of the Alliance for Open Media.

The following full WebP and AVIF images can be displayed if your browser supports.

0 0 vote
Article Rating
Notify of
Inline Feedbacks
View all comments