Updated code using picture
and next-generation formats…
<picture>
<source srcset="/img/projects/pile.avif" type="image/avif">
<source srcset="/img/projects/pile.webp" type="image/webp">
<img src="/img/projects/pile.png" alt="Pile of hrefs site" loading="lazy">
</picture>
I don’t have that many images on the site so it was a relatively easy update, but even with the laziest approach possible of using the defaults at Squoosh the difference in file size was impressive.
According to Lighthouse the image size totals for the Projects landing page were…
That’s almost 70% smaller just using the Squoosh default settings. With a little more fine-tuning I was able to get it down to 300.9k, or 83% smaller. Of course Lighthouse is using AVIF for those totals, so the percentage would be a bit less with WebP. Still it’s very much a nice performance bump as well as a progressive enhancement, otherwise known as a win-win!
The article by Jake Archibald that set me on this little journey has a lot of detailed techinical information and comparisons. Some of it was just beyond my technical comprehension, but if you’re looking for more technical information on AVIF, this is a good place to find it. The article mentions one of the downsides of the format, which is also a downside of WebP, no progressive display. Although the article on WebP does point to an advance decoding API.
For my little site that no one reads I’m OK with the tradeoff of progressive display, especially considering that the file sizes are relatively small for both formats and I’m using lazy loading, your mileage may vary.