响应式图像 - srcset 和尺寸属性 - 如何正确使用两者：基于设备像素比和基于视口的选择一起？

Question

到目前为止，我经常阅读有关此问题的信息，并且我自己的项目也发生过此问题。以下是我目前所了解的关于 srcset 和 sizes 属性的介绍。

关于如何使用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">

1. 基于视口的选择

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

可以使用 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>

更进一步：使用尺寸属性

基于视口的选择和 srcset 的默认设置是，图像始终具有 100% 宽度 (100vw)。 size 属性提供了很大的可能性来告诉浏览器，图像的宽度如何在特定的屏幕宽度下。

sizes 属性在 30em 和 50em 处设置布局断点， 并声明这些断点之间的图像大小为 100vw， 50vw，或计算（33vw - 100px）。这些尺寸不一定非要 与 CSS 中指定的实际图像宽度完全匹配。

用户代理将从尺寸属性中选择一个宽度，使用 第一项带有（括号中的部分） 评估为真，或使用最后一项 (calc(33vw - 100px))，如果他们 全部评估为假。

例子：

<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 让客户端始终加载正确的图像？还是如某些人所说，实际加载的图像还取决于处理能力和互联网连接速度？我曾抱怨 Retina 设备会加载较低分辨率的图像。

如何同时使用两者：基于设备像素比的选择和基于视口的选择？因为对于每个可能的尺寸，我可能想定义 200% 尺寸的视网膜图像以及非视网膜图像。

此外：在 srcset 中为不同的视口大小使用不同的图像是否有意义，或者 这是对 srcset 属性的滥用？如果可以将基于设备像素比的选择和基于视口的选择结合起来，这也应该是可能的。

Answer 1

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

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

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