Home > Designing, Others > GIFS and prefers-reduced-motion

GIFS and prefers-reduced-motion

November 3rd, 2020 Leave a comment Go to comments

The element has a trick it can do where it shows different image formats in different situations. If all you are interested in is formats for the sake of performance, maybe you’d do:

  <source srcset="img/waterfall.avif" type="image/avif">
  <source srcset="img/waterfall.webp" type="image/webp"> 
  <img src="img/waterfall.jpg" alt="A bottom-up shot of a huge waterfall in Iceland with green moss on either side.">

But notice those elements there… they can take a media attribute as well! In other words, they can be used for responsive images in the sense that you can swap out the image for a different one, perhaps even one with a different aspect ratio (e.g. a wide-crop rectangle shape on a large screen vs. close-crop square shape on a small screen).

The media attribute doesn’t have to be screen-size related though. Brad Frost documented this trick a while back:

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

That is using a prefers-reduced-motion media query to swap a GIF for a static image when less movement is preferred (a system-level choice). Clever! I saw Manuel’s tweet about it get some love the other day:

Start with a static image and replace it with an animation only if users have no preference for reduced motion. Progressive enhancement ??

CodePen: https://t.co/2knyHNiHPl pic.twitter.com/zvnuey5eU1

— Manuel Matuzovi? (@mmatuzo) October 9, 2020

Remember our little rif on Steve Faulkner’s idea from a little while ago? Rather than entirely stopping the GIF, you can put animated and non-animated images on top of each other (inside a

element) and allow them to be “played” on demand. We could alter that a smidge again and have it respect this media query by using a smidge of JavaScript:

CodePen Embed Fallback

The post GIFS and prefers-reduced-motion appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

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