Respecting prefers-reduced-motion with animated GIFs

An animated GIF does not respond to CSS animation rules, so disabling it for people who prefer reduced motion needs a different approach. A <picture> element can choose between the animation and a still image:

<picture>
  <source srcset="/images/animated-img.gif" media="(prefers-reduced-motion: no-preference)"></source>
  <img srcset="/images/static-img.png" alt="Description of image contents">
</picture>

The GIF is used only when the user has not asked for reduced motion. Otherwise the browser falls back to the static PNG in the <img> element.

This is a small change, but it respects the operating-system preference without asking the reader to install an extension or find a pause control that may not exist.