8

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.

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

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

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.

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.

Example:

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

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.

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

Simple example:

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

One step further: Using the sizes attribute

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.

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.

Example:

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

Here is the challange where I would be really glad if someone could enlighten me

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.

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.

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.

4

1 回答 1

1

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

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

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

于 2017-11-27T13:34:44.090 回答