The <img> element has the sizes and srcset , I try to figure out and understand how they work, but it seems that in this example they don’t work for me, although there seems to be no support in chrome problems.

Explain available, please, the principle of their work.

2 answers 2

The sizes attribute is not supported in any browser. The imgset attribute does not exist at all. To specify high-resolution images, use the srcset attribute:

  <picture> <source srcset="image/mushroom_landscape.jpg, image/mushroom_retina.jpg 2x" media="(min-width: 60em)"> <img src="image/mushroom.jpg" alt=""> </picture>

The srcset attribute has an effect only when the <source> element is located directly inside the <picture> element.

Each line can consist of the following parts:

  1. image address;
  2. a width descriptor that is a positive integer followed by w (for example: 600w). The descriptor tells the browser for which control point to use this image;
  3. The pixel density descriptor is a positive decimal number immediately followed by x.

Each line in the list must contain at least a handle to the width or density of pixels.

The browser selects the most appropriate image to display at a given time.

  • I'm not sure that the width descriptor is working. - DimenSi
  • Can you please show working examples, not reference information? - DimenSi

It worked for me

 <picture> <source media="(min-width: 600px)" srcset="2.jpg"> <source media="(min-width: 320px)" srcset="1.jpg"> <img src="def.jpg" alt="A very exciting yacht race."> </picture>