Question

我正在使用srcset为大型设备上的用户显示动画GIF，但需要向中小型设备上的用户显示静态JPG。

当我在1x屏幕上调整浏览器窗口大小时，以下代码非常有用。我遇到的问题是在纵向模式（768px）上在iPad上查看页面时，动画GIF正在显示。我得知浏览器正在尝试显示更高质量的图像，因为它的分辨率是2倍，但在我的情况下，它需要是完全不同的图像。

如果用户的屏幕宽度超过940px，如何更改为仅显示GIF？

<img src="static.jpg" sizes="(max-width: 940px)" srcset="static.jpg 940w, animated.gif 1400w" alt="">

Answer 1

这根本不是srcset的工作 - srcset处理除分辨率以外完全相同的多个来源。如果您要提供不同的图片，请使用<picture>和多个<source>元素。

例如，要按照要求准确回答您的问题：

<picture>
  <source media="(min-width: 940px)" srcset="animated.gif">
  <img src="static.jpg">
</picture>

但元问题仍然存在：你为什么只把gif发送到大屏幕设备？你在想象大屏幕设备有更多的带宽吗？