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.
Enjoyed reading this?
If you found this article helpful, consider supporting my writing. Every little bit helps keep this blog going.
Related articles
- HTML Features That Can Save You Some JavaScript
Use native disclosures, dialogs, popovers, form attributes, and responsive images before rebuilding their basic behaviour.
- The HTML Details That Make Forms More Accessible
Build clearer forms with visible labels, autocomplete, connected help and errors, fieldsets, and visible focus.
- When a Control Needs aria-label
Use aria-label for genuinely unlabelled controls while keeping visible text and native elements as the first choice.