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 Custom Properties