Question

我正在建立一个全屏幕背景的网站，该网站是响应式的，目前提供相同的图像到iPhone，就像它对27“显示器。显然27”显示器需要更高的res图像，目前所有设备/屏幕分辨率得到相同的图像，大约1900px宽，重量约300kb，这些看起来不像他们可以在27“屏幕上，但我不想让它们更大，因为有20个和移动用户可以永远加载它们。

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

Answer 1

对于您的用例，您可以将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的{p> sizes。要添加对Safari 8和IE的支持，您可以使用polyfill（https://github.com/scottjehl/picturefill或https://github.com/aFarkas/respimage）。

Answer 2

看看<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。

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

2 个答案: