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.

<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>