html - 响应式图片 - srcset 和 sizes 属性 - 如何正确使用两者 : device-pixel-ratio-based and viewport-based selection together?

Question

到目前为止，我经常读到这个问题，它也发生在我自己的元素中。这里介绍一下我到目前为止发现的关于 srcset 和 sizes 属性的信息。

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

1. 基于设备像素比当图像渲染尺寸固定时的选择

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

The x descriptor is not appropriate when the rendered size of the image depends on the viewport width (viewport-based selection), but can be used together with art direction.

例子:

 <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. 基于视口(viewport)的选择

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

The srcset and sizes attributes can be used, using the w descriptor, to provide multiple images that only vary in their size (the smaller image is a scaled-down version of the bigger image).

简单的例子:

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

更进一步:使用尺寸属性

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

The sizes attribute sets up the layout breakpoints at 30em and 50em, and declares the image sizes between these breakpoints to be 100vw, 50vw, or calc(33vw - 100px). These sizes do not necessarily have to match up exactly with the actual image width as specified in the CSS.

The user agent will pick a width from the sizes attribute, using the first item with a (the part in parentheses) that evaluates to true, or using the last item (calc(33vw - 100px)) if they all evaluate to 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 来确保客户端始终加载正确的图像？或者实际加载的图像是否也像某些人所说的那样取决于处理能力和互联网连接速度？我曾提示 Retina 设备会加载较低分辨率的图像。

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

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

Answer 1

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

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

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