Issue #2 - gifs and reduced motion

published on

You can show animated gifs only if users don’t prefer reduced motion and fall back to jpg, using the picture element in combination with the prefers-reduced-motion media feature.

<picture>
  <source srcset="pooh666.gif" media="(prefers-reduced-motion: no-preference)">
  <img src="pooh666.jpg" alt="Pooh Bear doing knee bends in front of a mirror. Instead of the mirror glass, there’s an illustration of Satan. It looks like Pooh is worshipping the devil.">
</picture>

Animations on the web are sometimes annoying, but they may also cause nausea, dizziness, and headaches in some users. For people with vestibular disorders it may even cause pain and make them feel so bad that they have to stop using the computer, needing time to recover. The negative side effects of animations can be terrible, that's why we should serve animation only if users prefer animation or have no preference.

In most operating systems users can decide to reduce motion in browsers and apps and we can react to that by querying the prefers-reduced-motion media feature.

We start with a jpg in case the user’s operating system does not provide such an option.

<picture>
  <img src="pooh666.jpg" alt="Pooh Bear doing knee bends in front of a mirror. Instead of the mirror glass, there’s an illustration of Satan. It looks like Pooh is worshipping the devil.">
</picture>

Then we replace the jpg with a gif only if the user has no preference for reduced motion.

<picture>
  <source srcset="pooh666.gif" media="(prefers-reduced-motion: no-preference)">
  <img src="pooh666.jpg" alt="Pooh Bear doing knee bends in front of a mirror. Instead of the mirror glass, there’s an illustration of Satan. It looks like Pooh is worshipping the devil.">
</picture>

Depending on your preference you should either see a jpg or a gif of Pooh Bear worshipping the lord of HTMHell.

Pooh Bear doing knee bends in front of a mirror. Instead of the mirror glass, there’s an illustration of Satan. It looks like Pooh is worshipping the devil.

Animation settings in different operating systems

  • macOS: System Preferences - Accessibility - Display - Reduce Motion
  • iOS: Settings - General - Accessibility - Reduce Motion
  • Android: Settings - Accessibility features - Accessibility - Advanced Visual Effects
  • Windows 10: Settings - Ease of Access - Display - Show animations in Windows.

Resources

Did you enjoy this tip?

Sign up for the HTMHell newsletter and receive an HTML tip or trick every week via e-mail.