Ronalds Vilciņš

GIFs and prefers-reduced-motion

By using prefers-reduced-motion: reduced, we can have control over how animation is disabled for this user group, along with honoring the user OS setting and not requiring a browser extension.

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

This site is ad-free and doesn’t use trackers. If you’d like to support my writing, I’d love if you could buy me a coffee.