The problem of responsive images has been on the minds of web developers for a long time. This is a task when you need to show a large image on large screens and a small image on small screens. This problem is solved through HTML attributes srcset and sizes, as well as the <picture>. Let’s consider them in more detail below.

• srcset  is a replacement for thesrc attribute — it takes precedence over! src
• src attribute must always be specified! This is necessary for search robots.
• src is only used if the browser does not support srcset.
• Firefox and Chrome handle srcset slightly differently, but the general logic remains the same. Important: different browsers can handle images differently. For example, Firefox can automatically reduce the size of a picture when the screen width is reduced, and Chrome, if it has loaded a larger size, will use it at smaller resolutions. The algorithms for selecting the appropriate image size may also vary slightly.

srcset contains a set of image URLs so that the browser can choose the most suitable option depending on the screen parameters of the device from which the page is viewed.

You can specify one or more URLs in  srcset.

In srcset it is implied to specify different sizes of the same picture. You can specify different ones, but the logic of its work implies the same picture.

Each line in the list must contain a URL and a descriptor. If no descriptor is specified, then the default is taken which is 1x.

The descriptor can be of two types:

• Physical width of the picture in pixels (actual width). For example,600w, 1000w.
• Device pixel density (display density) — DPR (device pixel ratio), for example, 2x, 3x.

A descriptor is an instruction to the browser. It helps the browser choose the correct URL from the set of images because the browser does not know anything in advance about the image located at that URL. Due to the descriptor, the browser understands what the width of the picture is or for which DPR it is suitable for.

The syntax of srcset is as follows:

How it works by example:

In this example, the picture full.jpg will not be used because there is a srcset attribute — the browser will select the most suitable image from srcset

Which picture will the browser choose?

• If your device has DPR=1:
• image-640.jpg - if the screen width is > 0px and <= 640px.
• image-960.jpg - if the screen width is > 640px and <= 960px.
• image-1200.jpg - if the screen width is > 960px.
• If your device has DPR=2 (the appropriate picture will be 2 times its physical width):
• image-640.jpg - if the screen width is > 0px and <= 320px (640/2).
• image-960.jpg - if the screen width is > 320px and <= 480px (960/2).
• image-1200.jpg- if the screen width is > 480px.

How it works by example:

Which picture will the browser choose?

• image-640.jpg— if the device DPR = 1.
• image-1280.jpg — if the device DPR = 2.
• image-1920.jpg — if the device DPR = 3.

DPR often reaches 4 on Samsung and other smartphones!

Examples to play with:

https://miliutin.ru/tests/srcset/2.html (without sizes) →

https://miliutin.ru/tests/srcset/1.html (with sizes) →

https://miliutin.ru/tests/srcset/4.html (with the sizes attribute) →

https://imagekitio.github.io/responsive-images-guide/srcset-density.html (DPR) →

If the image occupies only part of the screen width, using srcset without sizes is a bad idea. The browser does not know what the page layout looks like and will think that the image occupies the entire screen width. As a result, it will load a larger image than necessary.

Okay, what? The browser doesn’t know about the layout?

You might think that the browser can get the width of the image from CSS styles. But there is a caveat: at the time the IMG tag is parsed, the CSS styles are not yet processed and the page layout is not yet built. If the browser waits for all styles to be applied, this will delay the loading of images.

If no dimensions are specified in css for the image, then sizes will also limit the size of the image, as the width attribute does.

If we use the CSS property max-width: 100% for the picture, it overrides the value of the sizes attribute.

What does it mean? If the width of the picture specified in sizes is larger than the width of its parent element, then the width of the picture will be equal to the width of the parent element (due to max-width: 100%).

sizes is an addition to srcset that helps the browser choose the optimal image size.

sizes contains a list of elements (comma-separated), where each element describes the size of the image in relation to the width of the screen (viewport).

Using sizes gives the browser additional information to correctly select the appropriate image from srcset and start loading it as soon as it sees the <img> tag, without waiting for CSS styles parsing.

Syntax:

Please note that the last size has no media condition — this is the default value. It will be used when none of the previous media conditions fit.

Be careful about the order of declaration of checks, because the browser ignores all subsequent checks after the first successful one.

Elements in sizes can have:

• media condition — for example, (max-width: 300px) — it describes the width of the viewport. (max-width: 300px) means that the specified size is suitable for a screen width from 0 to 300 CSS pixels (inclusive). This is similar to a media query, but with some limitations. You cannot use screen or print.
• The width of the picture for the specified media condition. You can use different units (px, em, vw) to specify the width, but not %. More about units of measurement below.

Consider this example:

• If the viewport width is greater than 900px, the image takes a fixed width of 225px.
• Up to 900px, the picture occupies 33vw, i.e. 33% of the viewport width.
• Up to 700px, the picture occupies 50vw, i.e. 50% of the viewport width.
• Up to 400px, the picture occupies 100vw, i.e. the entire width of the viewport.

Based on this data, the browser will select one of the images from the srcset set (including all DPR checks — see srcset description).

Here is an example: https://imagekitio.github.io/responsive-images-guide/srcset-sizes.html →

Here is a complete list of the possible units that can be used in the sizes attribute.

When the page loads, the browser starts loading images before loading and interpreting CSS and JavaScript. This technique reduces page load time by an average of 20%. But it is not suitable for creating responsive images, for this the srcset  attribute was created.

For example, it would be impossible to load an<img> element, then determine the screen width using JavaScript and dynamically change the image URL. The original image would have already been loaded (or would have been sent for download) by the time its smaller version was loaded.

Link to the original article-https://wp-kama.com/2224/html-attributes-srcset-sizes-and-picture-tag →