Picture, WebP, and AVIF - Web Platform Feature of the Week
Unraveling the mystery of low WebP and AVIF usage and exploring how to utilize these image formats safely.
Welcome to the third installment of the Web Platform Feature of the Week newsletter. Last week I was reading a post on web.dev concerning some updates to the webstatus.dev website.
While playing with the new filtering and quuery options I was curious about the usage of the WebP and AVIF image formats. To my surprise the usage of both are much lower than I would have thought.
Note: Usage is based on Chrome installs in the wild only. However, with Chrome at around 68% market share, this is a pretty good general indication of use.
This made my wonder. Why is the usage so low?
Perhaps people are not even aware of AVIF, and perhaps even WebP.
Perhaps people are not aware of the browser support for these two formats.
Do people know that there is a safe way to use these today?
As I do not know the answer to these three topics, I figured I would cover all three in today’s newsletter.
What is WebP and AVIF?
In short, the WebP format is the successor to Portable Network Graphics (PNG) format, and AV1 Image File Format (AVIF) is slated to be the successor to WebP albeit with some competition from JPEG-XL.
Each promises better compression with higher fedility image quality leading to faster web experiences without sacrificing on visual quality and aesthetics.
What about browser support?
Browser support for WebP is so good that I almost never use PNG anymore. I say almost, because one does from time-to-time stumble upon a case where PNG somehow does a better job of compression.
Do note that the standards bodies has thrown us a bit of a curve ball by releasing version three of the PNG standard a short time ago. One of the new additions is official support for APNG aka animated PNG graphics. So, do not throw your PNG tools away just yet 😁
Along the same lines, support for AVIF is now not a problem for a lot of the sites and apps out there. With support as far back as Chrome 85, Edge 121, Safari 16.4, and Firefox 113 you are generally safe here.
What was this about safely using these formats?
Generally safe might very well not be good enough for you and that is totally fair. However, you can have the best of all worlds. Have your cake and eat it. Butter your bread on both sides.
How?
The picture and sources element. Heck, you can even go so far as falling back to a PNG if you really want to ensure you cover all your basis.
Let us use the above image of this strapping fella as an example. What we want to achieve is provide the browser with all three variants, AVIF, WebP, and PNG so it can decide which one to load based on the version it supports.
First things first though. We currently have our PNG version so, how do we get an AVIF and WebP version. There are many tools out there, but I love the browser based progressive web app known as Squoosh.
Here is the my end results:
Format | Physical size | File size |
|---|---|---|
JPEG | 2400px by 1651px | 420KB |
WebP (Effort: 4, Quality: 75) | 2400px by 1651px | 72KB 🙀 |
AVIF (Effort: 4, Quality: 50) | 2400px by 1651px | 29KB 🤯 |
In the end I realized that the orginal JPEG format I had was even better than coverting to PNG. Something to keep in mind. JPEG is pretty darn good with image compression.
However, as you can gather from the table, WebP and AVIF is mindblowingly good. So how do you use it today and give your users the best possible experience, especially should they be using a pretty new version of the modern browsers?
<picture>
<source srcset="./assets/strapping-fella.avif" type="image/avif">
<img src="./assets/strapping-fella.webp" height="1651" width="2400"
alt="Black and white cat with green eyes resting its front paws on a bamboo surface against a green background.">
</picture>And if you want to ensure you cater to everyone (and we should always try to do so):
<picture>
<source srcset="./assets/strapping-fella.avif" type="image/avif">
<source srcset="./assets/strapping-fella.webp" type="image/webp">
<img src="./assets/strapping-fella.jpg" height="1651" width="2400"
alt="Black and white cat with green eyes resting its front paws on a bamboo surface against a green background.">
</picture>That is it! Now the browser will do something like the following when encoutering the code blocks above:
Do I support
image/avif?Yes! Use the
imgtag with asrcof./assets/strapping-fella.avifNo 😢
Do I support
image/webp?Yes! Use the
imgtag with asrcof./assets/strapping-fella.webpNo 😢
Ah, good ol’ JPEG. Use the
imgtag as is ignoring everything else.
That is it for this week. I hope you learned something new that you can start using in your projects and make your pages and apps just a little bit (or a lot?) faster for the users of the web.
Let me know in the comments on YouTube!
You can find the code on GitHub and a live example is deployed here. You can also read more about the picture element on MDN Web Docs.
Find value in the work I do? You can support the work by buying me a coffee. Thank you! ✌️