Home > Designing, Others > Reducing motion with the picture element

Reducing motion with the picture element

Here’s a bonafide CSS/HTML trick from Brad Frost and Dave Rupert where they use the 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.

Direct Link to ArticlePermalink

The post Reducing motion with the picture element appeared first on CSS-Tricks.

Categories: Designing, Others Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.