GIF 和 prefers-reduced-motion | CSS-Tricks

<picture> 元素有一个技巧，它可以在不同的情况下显示不同的图像格式。如果您只对为了性能而使用格式感兴趣，那么您可能会做

<picture>
  <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.">
</picture>

但请注意那里的 <source> 元素……它们也可以使用 media 属性！换句话说，它们可以用于响应式图像，因为您可以将图像替换为另一个图像，甚至可以替换为具有不同纵横比的图像（例如，大屏幕上的宽裁剪矩形形状与小屏幕上的近裁剪正方形形状）。

但是，media 属性并不一定与屏幕大小相关。 Brad Frost 之前记录了这个技巧

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

这是使用 prefers-reduced-motion 媒体查询在首选更少移动的情况下（系统级选择）将 GIF 替换为静态图像。很聪明！我前几天看到 Manuel 关于它的推文获得了点赞

https://twitter.com/mmatuzo/status/1314430894090981376?s=12

还记得我们之前对 Steve Faulkner 的想法的稍微改进吗？与完全停止 GIF 不同，您可以将动画和非动画图像叠加在一起（在一个 <details> 元素内），并允许它们按需“播放”。我们可以再次稍微修改它，并通过使用一点点 JavaScript 来尊重此媒体查询