Reducing motion with the picture element

I was just talking with Dave about the accessibility of moving images on the web, and he said:

hm… I wonder if you could use picture + prefers-reduced-motion?

He then sends the following code:

<picture>
  <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)"></source> 
  <img srcset="animated.gif alt="brick wall"/>
</picture>

I copied the code, dropped it into a post of mine, created a static image of an animated GIF, and turned on the “reduce motion” preference (System Preferences > Accessibility > Display). And then BOOM. Just worked. In real time!

I think this is so freaking cool. I always associated prefers-reduced-motion with CSS, but of course the picture element accepts media queries!

Where else could this be useful? This technique would definitely be helpful for posts with embedded animated GIFs in it. Authors would have to grab a static frame of a GIF as a fallback, so there’s a bit of extra work involved, but the technical execution is pretty dang straightforward.

If you’re interested in learning more about motion and accessibility, I just had the pleasure of hearing Val give a great talk about it, and she’s been writing about it for a long while now.

Thanks Dave! Thanks Val!