我正在构建一个具有全屏背景的网站，该网站具有响应性，并且目前为 iphone 提供与 27 英寸显示器相同的图像。显然 27 英寸显示器需要更高分辨率的图像，目前所有设备/ 屏幕分辨率得到相同的图像，大约 1900 像素宽，重约 300kb，这些在 27 英寸屏幕上看起来不如它们，但我不想让它们变得更大，因为其中有 20 个和一个移动设备用户可能需要很长时间才能加载它们。
有没有类似于媒体查询的方法，我可以根据屏幕分辨率和理想的用户设备带宽来提供图像？
【问题讨论】：
标签： html css image responsive-design image-resizing
对于您的用例，您可以将srcset 与宽度描述符和sizes 属性一起使用。
srcset 属性定义了一个候选图像列表，并且您描述了每个图像的 宽度（以像素为单位）：
srcset="image-640.jpg 640w, image-980.jpg 980w, image-1240.jpg 1240w, image-1900.jpg 1900w, image-2400.jpg 2400w"
sizes 属性描述了您希望显示此图像的大小。这是一个例子：
sizes="(min-width: 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 />
如果您想这样做，则应使用另一个答案中描述的图片元素，称为艺术指导。这意味着您要使用不同的图像（按比例、裁剪或类似的方式），在这种情况下，顺序确实很重要。浏览器获取与媒体查询匹配的第一个source。
<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>
Chrome、Firefox 和 Safari 9（不是 8）支持srcset 和 sizes。要添加对 Safari 8 和 IE 的支持，您可以使用 polyfill（https://github.com/scottjehl/picturefill 或 https://github.com/aFarkas/respimage）。
【讨论】：
看看<picture> element。它允许您定义多个来源并根据媒体查询选择正确的来源：
<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>
虽然本机支持仍然有限，但有一个polyfill 可用以扩展兼容性。较旧的浏览器会直接忽略它并退回到包含的<img>。
为了获得最广泛的支持，您应该将其与srcset 属性结合使用。有关示例，请参见 picturefill documentation。
【讨论】：
srcset 元素还有 srcset 属性。