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
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.
Thanks Dave! Thanks Val!