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

Question

我建立了一个全屏幕背景的网站,该网站响应迅速,目前提供相同的图像到iPhone的27英寸显示器.显然27"显示器需要更高的res图像,目前所有的设备/屏幕分辨率获得大约1900像素宽,重约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>

srcset与sizes在浏览器,Firefox和Safari 9(未8)支撑.要添加对Safari 8和IE的支持,您可以使用polyfill(https://github.com/scottjehl/picturefill或https://github.com/aFarkas/respimage).

Answer 2

看看<picture>元素。它允许您定义多个来源并根据媒体查询选择正确的来源：

<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属性结合起来。有关示例，请参阅图片填充文档。