A long, long time ago… JPEG, GIF and PNG ruled the world of image formats. They had come to replace those antediluvian TIFFs and PCXs (not to forget the lovely and naïve BMP), only to see themselves being replaced now by sophisticated new-era formats that are slowly but relentlessly being adopted by photographers, designers, web developers and, finally, the general users.
The three most promising contenders to replace the JPEG/PNG/GIF triumvirate are AVIF, HEIC and WEBP. In this article, we will analyze them, compare them and finally offer an opinion about which one is the best suited to different use cases.
Before we take a closer look at each of them, let’s clarify that we will be using the term “file formats” to refer to both the container of the file (the logical structure of all the data related to the image to be stored) and the codec (the algorithm that codifies the pixels of the source image).
AVIF: The open-source standard by the industry strong players
AVIF was developed by the non-profit industry consortium AOMedia (Alliance for Open Media), founded by big players like Amazon, Apple, Microsoft and Netflix. It uses AV1 as its encoding algorithm and HEIF as the container file format.
Currently, AVIF is supported by 93% of browsers. Major operative systems also support it natively, as do many popular image processing applications like Adobe Photoshop and GIMP.
https://aomediacodec.github.io/av1-avif
WEBP: The lightweight contender
WebP was the first of these three to be released, around 2010, and was developed by Google. It is, by far, the most widely adopted one of the new formats in web contexts: more than 95% of the browsers already support it, and many image manipulation apps support it natively or via a plugin. Its compression algorithm derives from the V8 video codec.
Despite some major limitations to image size and slightly outdated codec technology, its wide adoption and small overall file size make it a very attractive format for replacing JPEG and PNG in web apps, where the loading times are critical.
https://aomediacodec.github.io/av1-avif
HEIC: The proprietary format for Apple fans
In 2017, Apple announced that they would start using HEIC as the default format for saving images of their cameras, as JPEG was not suitable for maintaining the quality of the generated images.
Even though the decision – as is often the case with Apple – was more of a marketing move than a technical necessity (other excellent open-source formats were already available), the advocates of Apple soon embraced it as “the best quality format for image storage”. However, we will see in a moment that this is relative and depends on lots of considerations.
HEIC is the only proprietary (closed) one of the three formats analyzed, and it is based on the h265 codec by the Moving Picture Experts Group (MPEG).
https://en.wikipedia.org/wiki/High_Efficiency_Video_Coding
Features comparison
| AVIF | WebP | HEIC | |
| Browser support | 93% | 95% | 13.5% |
| Lossless compression | ✅ | ✅ | Partial* |
| Lossy compression | ✅ | ✅ | ✅ |
| Open format | ✅ | ✅ | ❌ |
| Color depths | 8, 10, 12 | 8 | 8, 10 |
| Maximum resolution | 65,535 × 65,535 pixels | 16,383 × 16,383 pixels | Theoretically unlimited (but usually 32,768 x 32,768) |
| Animations | ✅ | ✅ | ✅ |
| Alpha channel | ✅ | ✅ | ✅ |
| Operative system support | W10, A12, Linux, iOS16, Ventura | W10, A4, Linux, iOS14, Big Sur | A9, iOS11, High Sierra |
| CMYK | ❌ | ❌ | ❌ |
| Exif metadata | ✅ | ✅ | ✅ |
| XMP metadata | ✅ | ✅ | ✅ |
| ICC | ✅ | ✅ | ✅ |
| HDR | ✅ | ❌ | ✅ |
* At least when using the GIMP HEIC exporter, subsequent “lossless” saving of the same images produces a minor image degradation.
Benchmarks
It is always a tricky thing to evaluate and compare file formats, as technologies, compression techniques and goals may vary greatly.
For our tests, we decided to focus on a subjective qualitative evaluation of the compression artifacts (after fixing the file size for fair comparison), and a quantitative comparison of the file sizes at highest possible quality.
The source image used for the comparison provides a balanced mix between high-frequency details, softened low-frequency backgrounds, some color and brightness contrast and a clear separation between figure, middle plane and background:
© Iraya Perez (www.irayaperez.com)
The RAW image was kindly provided to us by the photographer Iraya Pérez (www.irayaperez.com – Instagram: @irayaperez).
First benchmark: fixed-size file qualitative evaluation
One of the most useful ways to compare file formats is to generate files of roughly the same size (by adjusting the “quality” control of the export panel) and visually analyze the details.
For a 200KB file size (as JPEG is unable to save the file at lower sizes), this is the result:
As we can see, some details in the leaf and in the fingers are lost in WEBP, but AVIF and HEIC compress practically without loss of perceived quality. JPEG does not stand the comparison with the modern image formats.
Second benchmark: maximum lossy compression quantitative size evaluation
At maximum quality setting, almost all file formats offer an indistinguishable output for general use. And what about the file size? Well, in this case the difference is rather ample:
| JPEG | 12.8 MB |
| AVIF | 6.4 MB |
| WEBP | 4.9 MB |
| HEIC | 9.7 MB |
The WEBP file size is only slightly more than a third of the JPEG, with equivalent perceived quality.
Third benchmark: lossless compression fidelity of non-photographic images
So far, we have been talking about lossy compression, with some degradation of the image to reduce the size of the file. But when saving non-photographic images, like diagrams, logos or geometric shapes, even the smallest degradation is easily perceived. In this use case, it is better to opt for “lossless” compression, which keeps the image clean and preserves quality on subsequent saves.
But even when using a “true” lossless algorithm, the first time a raw image is saved in the destination format, some alteration in the colors might occur to accommodate the pixel values into the particular characteristics of the codec.
To check how much distortion might occur for the different formats, we have prepared this synthetic test image:
After saving it to the different formats with “lossless” settings, the visual degradation of the resulting images is almost imperceptible. However, when comparing the pixel values in arithmetic terms, we can see some alterations. Below we have maximized those alterations for comparison:
As we can see, WEBP is the one that saves the image with highest fidelity, while HEIC introduces some distortion, especially in the rainbow pattern.
It is also important to remember that HEIC does not have a general support for lossless saving, so it degrades the image with every save iteration.
The takeaway
Based on all this research, we can conclude that AVIF is the best format for general storage of photographic content to replace the JPEG format. This is because the perceived quality in AVIF is very similar to the HEIC format, with a smaller file size, and the format is published under a permissive free license (BSD), very close to public domain.
However, WebP is ideal for the web and mobile context, where the size is crucial to reduce loading times, and browser support must also be considered. Moreover, it is the format that achieves best in lossless compression.
HEIC is an excellent choice for the Apple ecosystem, but its closed, proprietary license nature and lack of wide lossless support keep us from suggesting it above the other two.
The future
With the emergence of a new generation of AI tools, spatial computing devices that use media in completely new ways, and the Alpha generation starting to use digital devices in their own ways, the techniques for manipulation of images and videos will require new formats and standards that will make the ones that we have just analyzed obsolete soon. But for now, let’s make the best use of the new exciting image formats to preserve with vibrant fidelity the best moments of our lives!
Autor: Yeray David Rodríguez