响应式图像 - srcset和sizes属性 - 如何正确使用:基于设备像素比率和基于视口的选择？

Question

到目前为止,我经常读到这个问题,这也适用于我自己的项目.以下介绍了迄今为止我发现的有关srcset和尺寸属性的内容.

如何使用srcset-attribute 有两种不同的可能性(源w3c:http://w3c.github.io/html/semantics-embedded-content.html#device-pixel-ratio ):

1. 当图像的渲染大小固定时,基于设备像素比率的选择

这是一种简单可靠的使用方法srcset.您只需说:如果目标设备的设备像素比率大于x,则使用以下更高的分辨率显示此图像.

当图像的渲染大小取决于视口宽度(基于视口的选择)时,x描述符不合适,但可以与艺术方向一起使用.

例:

 <img src="/uploads/100-marie-lloyd.jpg"
      srcset="/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x"
      alt="" width="100" height="150">

2. 基于视口的选择

此方法允许您根据视口的大小显示不同的图像大小.这是您在示例中主要使用的方法.

可以使用srcset和sizes属性,使用w描述符来提供仅在大小上变化的多个图像(较小的图像是较大图像的缩小版本).

简单的例子:

<h1><img sizes="100vw" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"
    src="wolf-400.jpg" alt="The rad wolf"></h1>

更进一步:使用sizes属性

基于视口的选择和srcset的默认值是,图像始终具有100%宽度(100vw).sizes属性可以告诉浏览器,图像的宽度如何处于特定的屏幕宽度.

sizes属性在30em和50em处设置布局断点,并声明这些断点之间的图像大小为100vw,50vw或calc(33vw - 100px).这些尺寸不一定必须与CSS中指定的实际图像宽度完全匹配.

用户代理将从sizes属性中选择一个宽度,使用带有(括号中的部分)的第一个项目评估为true,或者使用最后一个项目(calc(33vw - 100px)),如果它们都评估为false.

例:

<img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
src="swing-400.jpg" alt="Kettlebell Swing">

如果有人能够启发我,我会很高兴这里的挑战

我可以依赖srcset,客户端总是加载正确的图像吗？或者实际加载的图像还取决于处理能力和互联网连接速度,正如一些人所说的那样？我抱怨视网膜设备加载较低分辨率的图像.

我如何同时使用:基于设备像素比率和基于视口的选择？因为对于每种可能的尺寸大小,我可能想要定义具有200%尺寸的视网膜图像以及非视网膜图像.

此外:在srcset中为不同的视口大小使用不同的图像是否有意义,或者这是对srcset属性的误用？如果可以组合基于设备像素比率和基于视口的选择,这也应该是可能的.

Answer 1

我可以依靠 srcset 使客户端始终加载正确的图像吗？ 答案是不。此外，您永远无法知道用户将上传的图像的尺寸，除非您想使用 Javascript 代码进行检查，然后限制用户上传正确的尺寸。但这对用户来说不太友好。

同样，您可能希望实现一种算法来始终将图像大小调整为您想要的特定大小，而不影响质量，因此您不必将不同的 imageurl 传递给 srcset，而只需使用 src attr。这对于互联网连接速度较慢的用户来说是一个优势。

对于不同的视口大小在 srcset 中使用不同的图像是否有意义，或者这是对 srcset 属性的滥用？ 关键是您总共要处理多少个设备视口。如果您为不同的视口指定不同的图像大小和尺寸，您可能无法同时定位所有图像，尤其是当您在开发时未处理的新设备可用时。