根据设备宽度和用户带宽提供不同尺寸/分辨率的图像

Posted

技术标签:

【中文标题】根据设备宽度和用户带宽提供不同尺寸/分辨率的图像【英文标题】:Serve an image at different size / resolution depending on device width and users bandwidth 【发布时间】:2015-07-30 06:32:57 【问题描述】:

我正在构建一个具有全屏背景的网站,该网站具有响应性,并且目前为 iphone 提供与 27 英寸显示器相同的图像。显然 27 英寸显示器需要更高分辨率的图像,目前所有设备/ 屏幕分辨率得到相同的图像,大约 1900 像素宽,重约 300kb,这些在 27 英寸屏幕上看起来不如它们,但我不想让它们变得更大,因为其中有 20 个和一个移动设备用户可能需要很长时间才能加载它们。

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

【问题讨论】:

【参考方案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==" >
</picture>

Chrome、Firefox 和 Safari 9(不是 8)支持srcsetsizes。要添加对 Safari 8 和 IE 的支持,您可以使用 polyfill(https://github.com/scottjehl/picturefill 或 https://github.com/aFarkas/respimage)。

【讨论】:

【参考方案2】:

看看&lt;picture&gt; element。它允许您定义多个来源并根据媒体查询选择正确的来源:

<picture>
   <source media="(min-width: 480px)" srcset="tablet.png">
   <source media="(min-width: 1024px)" srcset="desktop.png">
   <img src="tablet.png" >
</picture>

虽然本机支持仍然有限,但有一个polyfill 可用以扩展兼容性。较旧的浏览器会直接忽略它并退回到包含的&lt;img&gt;

为了获得最广泛的支持,您应该将其与srcset 属性结合使用。有关示例,请参见 picturefill documentation。

【讨论】:

srcset 元素还有 srcset 属性。 @alexanderfarkas 想更具体一点吗? 1.源元素的顺序很重要,您提供了错误的顺序。 2. 对于他的用例,他应该使用带尺寸的 srcset,而不是图片。 @alexanderfarkas 谢谢,你是对的!这是source sets and resource selection 上的规范,供所有感兴趣的人参考。

以上是关于根据设备宽度和用户带宽提供不同尺寸/分辨率的图像的主要内容,如果未能解决你的问题,请参考以下文章

如何根据不同的屏幕尺寸测量和布局视图

屏幕尺寸分辨率问题

为不同的屏幕尺寸提供不同的图片(为那些没有必要下载全尺寸大图的设备节省带宽)

ANDROID平台大尺寸设备显示文字不正常的问题

如何创建可根据不同手机尺寸调整大小的响应式图像?

超分算法在 WebRTC 高清视频传输弱网优化中的应用