响应式图像 - srcset和sizes属性 - 如何正确使用：基于设备像素比率和基于视口的选择？ [英] Responsive images - srcset and sizes attribute - how to use both correctly: device-pixel-ratio-based and viewport-based selection together?

问题描述

到目前为止，我已经经常阅读这个问题，这也适用于我自己的项目。以下介绍了迄今为止我发现的有关srcset和尺寸属性的信息。

I have read about this problem quite often so far and it also occurs for my own projects. Here is an introduction of what I have found out so far about the srcset and the sizes attribte.

如何使用 srcset -attribute（source w3c： http://w3c.github.io/html/semantics-embedded-content.html#device-pixel-ratio ）：

There are two different possibilities on how to use the srcset-attribute (source w3c: http://w3c.github.io/html/semantics-embedded-content.html#device-pixel-ratio):

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

1. Device-pixel-ratio-based selection when the rendered size of the image is fixed

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

This is a simple and reliable way to use srcset. You simply say: If the device-pixel ratio of the target devicer is bigger than x, display this image with the following higher resolution.

当
图像的渲染大小取决于视口宽度（基于视口的选择）时，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. 基于视口选择

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

This method allows you to display different image sizes depending on the size of your viewport. This is the method you are primarily using within your example.

可以使用w描述符$ b来使用srcset和sizes属性$ b提供的图片尺寸只有不同（较小的
图片是较大图片的缩小版）。

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>

更进一步：使用尺寸属性

基于视口的选择和srcset的默认值是，图像的宽度始终为100％（ 100vw ）。 sizes属性很有可能告诉浏览器，图像的宽度在某个屏幕宽度。

The default for Viewport-based selection and srcset is, that the image always has 100% width (100vw). The sizes attribute is giving the great possibility to tell the browser, how the width of an image is at a certain screen width.

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

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.

用户代理将从尺寸中选择宽度属性，使用带有（b括号中的部分）的
第一项，
的计算结果为true，或使用最后一项（calc（33vw - 100px）），如果
全部计算为false 。

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

Can I rely on srcset that a Client always load the correct image? Or is the actually loaded image also depending on processing power and internet connection speed as some people stated? I had complaints about retina devices which load lower resolution images.

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

How can I use both: Device-pixel-ratio-based and viewport-based selection together? Because for each possible size in sizes, I may want to define a retina image with 200% size as well as a non-retina image.

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

And furthermore: Does it make sense to use different images within srcset for different viewport sizes or is this a misuse of the srcset attribute? If it is possible to combine device-pixel-ratio-based and viewport-based selection, this should also be possible.

推荐答案

我可以依赖srcset客户端总是加载正确的图像吗？
答案是否定的。此外，您永远不会知道用户将上传的图像的尺寸，除非您想使用Javascript代码检查，然后限制用户上传正确的尺寸。但这不会太用户友好。

Can I rely on srcset that a Client always load the correct image? The answer is NO. Moreso, you can never know the dimension of the image the user will upload unless you want to check that with a Javascript code and then restrict the user to upload the right dimension. But that will not be too user friendly.

同样，您可能希望实现一种算法，始终将图像调整到您想要的特定尺寸，而不会扭曲质量，所以你不必将不同的imageurl传递给srcset，只需使用src attr。对于网络连接速度较慢的用户来说，这可能是一个优势。

Again, You might want to implement an algorithm to always resize the image to the particular size you want without distorting the quality, so you don't have to pass different imageurl to the srcset and just use the src attr. This can be an advantage to users with slow internet connection.

在srcset中使用不同的图像用于不同的视口大小是否有意义，或者这是误用srcset属性？
重点是你想要处理多少个设备Viewport。如果为不同的视图端口指定不同的图像大小和维度，则可能无法一次性全部定位，尤其是当您在开发时没有处理的新设备可用时。

Does it make sense to use different images within srcset for different viewport sizes or is this a misuse of the srcset attribute? The point is how many device Viewport do you want to handle in all. If you specify different image sizes and dimension for different view port, you might not able to target all at once especially when a new device is available that you didn't handle as at the time you were developing.

这篇关于响应式图像 - srcset和sizes属性 - 如何正确使用：基于设备像素比率和基于视口的选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！