Why you should use AVIF over JPEG, WebP, PNG and GIF In 2024
AVIF is a recent file format that, at the time of this article, has gained support in Microsoft Edge, thereby achieving significant browser support.
!Important: We are no longer in the dark ages, the majority of large web platforms typically support up to 1 year of browser versions from the current. You can begin to use AVIF with a WebP fallback (the fallback is only necessary until the end of 2024)
Please read the “Supporting legacy browser versions” section before commenting on support. Many developers appear to be uncertain about the support for browser versions and image fallbacks, leading to confusion. This article pertains to web development not email development which is highly legacy.
What does this mean?
You can now “predominantly” use AVIF as a default for rasterized images as it essentially replaces much of common JPEG usage.
Why AVIF over JPEG and WEBP?
- Compression efficiency: Higher compression ratio than formats like JPEG and WebP whilst preserving a high image quality.
- Color depths: Supports a wide range of color depths which includes 8bit, 10bit, 12 bit and 16 bit.
- Wide Color Gamut and HDR Support: AVIF enables vibrant and lifelike images with a broad range of colors and high dynamic range (HDR). Ideal for applications demanding precise color and detail, like professional photography and media content.
- Lossy and lossless compression: AVIF’s lossless compression is far better than compressed Bitmap and PNG
- Alpha channel support: Like PNG, you can store semi-transparent images but now with better compression.
- Based on AV1: AV1 is a royalty free codec developed by Alliance for Open Media based on Google’s VP9 coded. This means it will have wide spread adoption with far less controversy compared to other upcoming image formats.
- Full major browser and wide platform support.
- Reduced Bandwidth and Faster Loading Times: Smaller files means faster loading for the user.
Cons
- Computationally intensive compression: Generally, AVIF compression is computationally more intensive than older image formats like JPEG, but it typically achieves superior compression efficiency.
How much smaller?
Alliance for Open Media are very excited they claim:
“Images can be up to ten times smaller than JPEGs of similar visual quality.”
Also
“AVIF can perform reductions of 40% to 90%”
I’ve been using AVIF for about 4 years and in my opinion most of the images I compress are about 60% of the size of the equivalent quality JPEG output image. This is still shockingly impressive.
So AVIF covers most image scenario with the exception of:
- Vector: SVG and SVG images cover this well.
- Vector animations: Again SVG does an decent job here, would like more options with render quality but meh.
Backend Encoding/ Decoding
If you don’t find a software library supporting AVIF in your preferred backend language you can wrap libavif, the offical AOMedia encoder/ decoder. Or if you’re brave you can convert it for native support.
Below are some I came across at a glance on github.
- Node.js: https://github.com/lovell/sharp
- PHP: https://github.com/flyimg/flyimg
- Go: https://github.com/webp-sh/webp_server_go
When not to use AVIF
It really depend on the dynamics and complexities of the image but typically:
- Lossless vector/ non-realistic animations
- It depends (Ugh)
There are some “rare” cases where WebP or even JPEG may outshine AVIF when comparing the quality/ compression ratio.
As a rule of thumb, AVIF typically shines when it comes to optimising photo-realistic images. I personally find that it is also pretty dominant for other images like diagrams and vecor art.
Supporting legacy browser versions
Imagine someone has just come back from a long vacation and they have not updated their browser for a while.
If you want to start using AVIF at the time of this article, use srcset and or <picture><source> to use AVIF with fallback to older image formats like WebP or JPEG.
If you have surpassed 3 or more releases of Edge from the time of this article, you will be fine using src alone.
Animations
This is slightly out of the scope of this article but as mentioned AVIF can be used for animations just like APNG.
Both formats are far more superior to GIF and you should consider them as replacements since they have full browser support and GIF is an outdated format for moving images with poor compression.
With this said, be hesitant when it comes to email support as that is also an old and terrible system that may likely not have consistent support for these new formats, make sure to check.
Conclusion
I try to stay away from competing image formats and perspectives on preferred compression results. The truth is that all lossless codecs come at a cost; it’s all give and take.
You may not like the style of particular image artifacts, but if it means someone can load your website faster on the train or with poor latency, then you also have to make a compromise as a developer.
The ultimate goal is to provide the smallest payload to the user within reason, despite what format proves to be more optimal.
In my opinion, new image formats are simply tools for building better products, for improved UX rather than a matter of competitive preference.
Thanks for the read :)
