LiamNov 21, 2022
Andy Bell

A quick tip from the archives and a technique I use really frequently is leveraging the <picture> element as a progressive enhancement tool for modern image formats such as AVIF and WebP.

If all else fails, the backup JPG or PNG is loaded seamlessly.

https://piccalil.li/quick-tip/picture-as-a-progressive-enhancement/

Picture element as a progressive enhancement - Piccalilli

Piccalilli
Nov 21, 2022 at 3:53pmWeb
Show threadMatt SeymourNov 21, 2022
@andy Do you know if there is any performance benefit in manually declaring this over a CDN auto switching a WebP image in for example?
Show threadAvalynn Gunn 🇵🇸Nov 21, 2022
@mattseymour @andy Cloudinary f_auto should be comparable performance wise, the only risk is that since it's user agent based, if the user is manipulating user agent via extension or whatnot there's no fallback so the image might fail to load.
Show threadMatt SeymourNov 21, 2022
@clarkgunn @andy thanks Clark - good to know!
Show threadRyan Townsend (old account)Nov 21, 2022
@clarkgunn @mattseymour @andy isn’t it based on the Accept header, rather than User-Agent?
It should always serve a valid image as it either sees a request that ‘accepts’ image/webp or image/avif (and serves those formats) or it’ll fallback to JPEG/PNG/GIF.
At least, that’s how IMGIX works (I don’t often work with Cloudinary)
Show threadAvalynn Gunn 🇵🇸Nov 21, 2022

@ryantownsend @mattseymour @andy

Accept header is definitely a better approach. I couldn't find implementation details in cloudinary's docs, just this 2 year old support article which says it uses user agent.

https://support.cloudinary.com/hc/en-us/articles/360016387579-How-to-set-an-automatic-format-selection-f-auto-when-using-eager-transformations

Show threadMatt SeymourNov 22, 2022
@clarkgunn @ryantownsend @andy I use Cloudflare Polish though WP Engine which uses Accept headers too - https://developers.cloudflare.com/images/polish/compression/
Polish compression · Cloudflare Image Optimization docs

Choose between Cloudflare Images and Cloudflare Image Resizing, two products tailored to your different needs.

Show threadMatheus FantinelNov 21, 2022

@andy is it okay to self-promote in your replies? I love this tip and wrote an article a while ago that also goes a bit more into other ways of optimizing images.

https://fantinel.dev/web-images-modern-formats/

Smarter, Lighter, Better Images: A Guide to Optimization - Matt Fantinel - Web Developer

Learn how to reduce page loading times and bounce rate.

Show threadAndy BellNov 21, 2022
@fantinel of course. This is a great post!