Preferring WebP To AVIF
One advantage of using eleventy-img with my own markup is full control over the output. I had it set up to serve AVIF images where possible and WebP otherwise. However, AVIF sacrifices quality for smaller sizes compared to WebP. Although the difference is minor, I wanted to avoid it except when necessary.
Enter the prefers-reduced-data media
query. This is a new,
experimental addition to CSS—so new that, to test it, I had to enable ‘Experimental Web
Platform Features’ in Chrome under about://flags, without which changing the value on the
Dev Tools’ Rendering page wouldn’t affect media queries. (Firefox doesn’t support it at all yet.)
My markup essentially changed from this:
HTML<picture class="image-picture">
<source srcset="/assets/images/resized/e_YI6UQLeo-400.avif 400w, /assets/images/resized/e_YI6UQLeo-800.avif 800w, /assets/images/resized/e_YI6UQLeo-1200.avif 1200w, /assets/images/resized/e_YI6UQLeo-2416.avif 2416w" format="avif" width="400" height="145" sizes="(min-width: 70.75em) 19rem, (min-width: 480px) 400px, 85vw">
<source srcset="/assets/images/resized/e_YI6UQLeo-400.webp 400w, /assets/images/resized/e_YI6UQLeo-800.webp 800w, /assets/images/resized/e_YI6UQLeo-1200.webp 1200w, /assets/images/resized/e_YI6UQLeo-2416.webp 2416w" format="webp" width="400" height="145" sizes="(min-width: 70.75em) 19rem, (min-width: 480px) 400px, 85vw">
<img class="image-image" alt="" loading="lazy" srcset="/assets/images/resized/e_YI6UQLeo-400.png 400w, /assets/images/resized/e_YI6UQLeo-800.png 800w, /assets/images/resized/e_YI6UQLeo-1200.png 1200w, /assets/images/resized/e_YI6UQLeo-2416.png 2416w" width="400" height="145" sizes="(min-width: 70.75em) 19rem, (min-width: 480px) 400px, 85vw">
</picture>
To this:
HTML<picture class="image-picture">
<source media="(prefers-reduced-data: reduce)" srcset="/assets/images/resized/e_YI6UQLeo-400.avif 400w, /assets/images/resized/e_YI6UQLeo-800.avif 800w, /assets/images/resized/e_YI6UQLeo-1200.avif 1200w, /assets/images/resized/e_YI6UQLeo-2416.avif 2416w" format="avif" width="400" height="145" sizes="(min-width: 70.75em) 19rem, (min-width: 480px) 400px, 85vw">
<source srcset="/assets/images/resized/e_YI6UQLeo-400.webp 400w, /assets/images/resized/e_YI6UQLeo-800.webp 800w, /assets/images/resized/e_YI6UQLeo-1200.webp 1200w, /assets/images/resized/e_YI6UQLeo-2416.webp 2416w" format="webp" width="400" height="145" sizes="(min-width: 70.75em) 19rem, (min-width: 480px) 400px, 85vw">
<img class="image-image" alt="" loading="lazy" srcset="/assets/images/resized/e_YI6UQLeo-400.png 400w, /assets/images/resized/e_YI6UQLeo-800.png 800w, /assets/images/resized/e_YI6UQLeo-1200.png 1200w, /assets/images/resized/e_YI6UQLeo-2416.png 2416w" width="400" height="145" sizes="(min-width: 70.75em) 19rem, (min-width: 480px) 400px, 85vw">
</picture>
…the only difference being the addition of media="(prefers-reduced-data: reduce)". Assuming a
browser that supports the media query, users who prefer to conserve bandwidth will now automatically
see slightly smaller (and lower-quality) images; all other users will see WebP or other formats.
Browsers that don’t support the media query will never display AVIF images. Since this is only a minor change, though, I don’t mind it being something of a feature-in-waiting.