Html 根据设备宽度和用户带宽，以不同的大小/分辨率提供图像

我正在建立一个全屏背景的网站，该网站响应迅速，目前为iphone提供的图像与27英寸显示器相同。显然，27英寸显示器需要更高分辨率的图像，目前所有设备/屏幕分辨率都获得相同的图像，宽约1900px，重约300kb，这些东西在27英寸的屏幕上看起来并没有它们看起来那么好，但我不想让它们变得更大，因为它们有20个，而且一个移动用户可能要花很长时间才能加载它们

是否有一种类似于媒体查询的方法，可以根据屏幕分辨率和用户设备的理想带宽提供图像？

查看。它允许您定义多个源，并根据媒体查询选择正确的源：

<picture>
   <source media="(min-width: 480px)" srcset="tablet.png">
   <source media="(min-width: 1024px)" srcset="desktop.png">
   <img src="tablet.png" alt="A photo of London by night">
</picture>

虽然本机支持目前还很有限，但有一种扩展兼容性的方法可用。较旧的浏览器只需忽略它，然后退回到附带的

---

要获得最广泛的支持，您应该将其与属性相结合。有关示例，请参见。

对于您的用例，您可以将

srcset

与宽度描述符和

size

属性一起使用

srcset

属性定义候选图像列表，您可以用像素来描述每个图像的宽度：

srcset=“image-640.jpg 640w，image-980.jpg 980w，image-1240.jpg 1240w，image-1900.jpg 1900w，image-2400.jpg 2400w”

size

属性描述了您希望显示此图像的大小。以下是一个示例：

size=“（最小宽度：2400px）2400px，100vw”

这意味着，如果浏览器视口为2400或更大，则您希望以2400像素显示它，否则您希望以全视口宽度显示它

这看起来像这样：

<img 
    srcset="image-640.jpg 640w, image-980.jpg 980w, image-1240.jpg 1240w, image-1900.jpg 1900w, image-2400.jpg 2400w" 
    sizes="(min-width: 2400px) 2400px, 100vw />

---

Chrome、Firefox和Safari 9（不是8）支持大小为

的
srcset
。要添加对Safari 8和IE的支持，可以使用polyfill（或）.
元素的
还有
srcset
属性。@alexanderfarkas想更具体一点吗？1.源元素的顺序很重要，您提供了错误的顺序。2.对于他的用例，他应该使用srcset的大小，而不是图片。@alexanderfarkas谢谢，您是对的！这是为其他人提供的规范特德。
<picture>
   <source media="(min-width: 1024px)" srcset="desktop.png">
   <source media="(min-width: 480px)" srcset="tablet.png">
   <source srcset="mobile.png">
   <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="A photo of London by night">
</picture>