Here’s a bonafide CSS/HTML trick from Brad Frost and Dave Rupert where they use the
<picture> element to switch out a GIF file with an image if the user has reduced motion enabled. This is how Brad goes about implementing that:
<picture> <!-- This image will be loaded if the media query is true --> <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)"></source> <!-- Otherwise, load this gif --> <img srcset="animated.gif alt="brick wall"/> </picture>
How nifty is this? It makes me wonder if there are other ways this image-switching technique can be used besides accessibility and responsive images…
Also it’s worth noting that Eric Bailey wrote about the reduced motion media query a while back where he digs into its history and various approaches to use it.
from CSS-Tricks http://bradfrost.com/blog/post/reducing-motion-with-the-picture-element/