Reducing motion with the <picture> element

Great trick by Brad Frost, in which he combines prefers-reduced-motion? with the <picture> element

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

Yes, that actually works!

Reducing motion with the <picture> element →

💫 When taking prefers-reduced-motion into account in your CSS code, it becomes really powerful when combined with CSS Variables

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.