Hier ist ein ehrlicher CSS/HTML-Trick von Brad Frost und Dave Rupert, bei dem sie das <picture>-Element verwenden, um eine GIF-Datei durch ein Bild zu ersetzen, wenn der Benutzer „Bewegung reduzieren“ aktiviert hat. So geht Brad bei der Implementierung vor
<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>
Wie raffiniert ist das? Es lässt mich fragen, ob es neben Barrierefreiheit und responsiven Bildern noch andere Verwendungsmöglichkeiten für diese Bildwechseltechnik gibt ...
Außerdem ist es erwähnenswert, dass Eric Bailey vor einiger Zeit über die reduced motion Media Query geschrieben hat, in der er sich mit ihrer Geschichte und verschiedenen Ansätzen zu ihrer Verwendung beschäftigt.