Andy BellNov 21, 2022

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
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 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 🇵🇸

@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

Nov 21, 2022 at 6:52pmMastodon for Android
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.