无论设备的像素比是多少，如何使用 SRCSET 显示特定尺寸的图像？

Question

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

当我在 1x 屏幕上调整浏览器 window 大小时，以下代码效果很好。我运行遇到的问题是在 iPad 上以纵向模式 (768px) 查看页面时，动画 GIF 正在显示。我知道浏览器正在尝试显示更高质量的图像，因为它是 2 倍分辨率，但在我的情况下，它需要是完全不同的图像。

如果用户的屏幕宽度超过 940 像素，如何将其更改为仅显示 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 发送到大屏幕设备？你是在想象大屏幕设备有更多的带宽还是什么？

How to display a specific size image using SRCSET no matter what the device's pixel ratio is?