Responsive images - the srcset attribute and sizes - how to use both options: sharing pixels based on pixels and based on viewing.

Question

I read quite often about this issue, and this also happens for my own projects. Here is an introduction of what I have found out so far about srcset and attribute sizes.

There are two different ways to use the srcset attribute (w3c source: http://w3c.imtqy.com/html/semantics-embedded-content.html#device-pixel-ratio ):

• Choosing a pixel size at the device level with a fixed image size

This is a simple and reliable way to use srcset . You just say: if the ratio of the pixel of the device to the target device is greater than x, display this image with the next higher resolution.

The x descriptor is not suitable if the displayed size of the image depends on the width of the viewport (selection based on view), but can be used together with the artistic 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 that you mainly use in your example.

The srcset and size attributes can be used using the w descriptor to provide multiple images that change only in size (a smaller image is a smaller version of a larger image).

A 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 more step: using the size attribute

By default, for choices based on Viewport and srcset, it is indicated that the image always has a width of 100% ( 100vw ). The size attribute provides a great opportunity to tell the browser how the image width has a certain screen width.

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

The user agent will select the width from the size attribute using the first element with (part in brackets), which evaluates to true or uses the last element (calc (33vw - 100px)) if they are all evaluated as 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 you are, where I would be very happy if someone could enlighten me

Can I rely on srcset that the client always loads the correct image ? Or, in fact, the uploaded image also depends on the processing power and Internet connection speed, as some people have stated? I had complaints about retina devices that download low resolution images.

How can I use at the same time: pixel-based selection based on pixels and based on view? Since for each possible size in size, I can define an image of a retina with a size of 200%, as well as an image without a retina .

And besides: Does it make sense to use different images in srcset for different sizes of viewports or is it a misuse of the srcset attribute? If it is possible to combine pixel-based selection based on pixels and based on viewing, this should also be possible.

Answer 1

Can I rely on srcset that the client always loads the correct image? The answer is no. Moreso, you can never know the size of the image that will be uploaded by the user if you do not want to check it using Javascript code, and then limit the download to the correct size. But it will not be too user-friendly.

Again, you may need to implement an algorithm that allows you to always resize the image to the desired size without distorting quality, so you do not need to transfer different images to srcset and just use src attr. This can be an advantage for users with a slow internet connection.

Does it make sense to use different images in srcset for different sizes of the viewport or is it the wrong use of the srcset attribute? The bottom line is how many Viewport devices you want to handle at all. If you specify different image sizes and sizes for different presentation ports, you won’t be able to target them all at once, especially when a new device is available that you couldn’t handle, as at the time of development.