Responsive images - srcset and sizes attribute - how to use both correctly: device-pixel-ratio-based and viewport-based selection together?

Question

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

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

Answer 1

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.

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.

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.