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.

Next in series: (#36 in Colophon: Finding A Place For My Head)