Tell me the option how to make responsive images?

What you want:

  1. Under each breakpoint the image is loaded
  2. Retina display image counted
  3. Images are scaled
  • And what does the second point mean? If retina, then insert a larger image in the resolution? - VostokSisters
  • Yes, exactly that is necessary - ruslik

2 answers 2

To create the most responsive images suitable design

<picture> <source media="(media-query-1)" sizes="(media-query-1.1) x, y" srcset="images/ordinary.jpg"> <source media="(media-query-2)" sizes="(media-query-2.1) z, w" srcset="images/ordinary-2.jpg"> <img src="images/ordinary.jpg"> </picture>
  1. Suppose you want one image on screens up to 400 pixels and more on screens. We do this:
 <picture> <source media="(max-width: 400px)" srcset="images/ordinary.jpg"> <source media="(min-width: 401px)" srcset="images/ordinary2.jpg"> <img src="images/ordinary2.jpg"> </picture>
  1. You also want pixel density to be taken into account. Then it is necessary to specify several image paths in the srcset attribute, write 1x , 2x and, if necessary, 3x . x allows you to refer to device-pixel-ratio .
 <picture> <source media="(max-width: 400px)" srcset="images/ordinary.jpg 1x, images/ordinary-retina.jpg 2x, images/ordinary-hd.jpg 3x"> <source media="(min-width: 401px)" srcset="images/ordinary2.jpg 1x, images/ordinary2-retina.jpg 2x, images/ordinary2-hd.jpg 3x"> <img src="images/ordinary2.jpg"> </picture>
  1. Also you want for different breakpoints a different image size , the sizes attribute will come to the rescue. We will be implementing the following scenario: 1) for screens less than 800 pixels there will be an image of ordinary.jpg , 1.1) for screens 400 and fewer pixels the image will be 100vw wide, in other cases it will occupy 70vw ; 2) for screens greater than 800 pixels. 2.2. for pixels for screens greater than 1400 pixels, it will have a width of 40vw , otherwise 50vw .
 <picture> <source media="(max-width: 800px)" sizes="(max-width: 400px) 100vw, 50vw" srcset="images/ordinary.jpg 1x, images/ordinary-retina.jpg 2x, images/ordinary-hd.jpg 3x"> <source media="(min-width: 801px)" sizes="(min-width: 1400px) 40vw, 50vw" srcset="images/ordinary2.jpg 1x, images/ordinary2-retina.jpg 2x, images/ordinary2-hd.jpg 3x"> <img src="images/ordinary2.jpg"> </picture>
  • I didn’t quite understand why size, why just not specify in css that the minimum width of the image is 100% at a resolution of less than 540, say - ruslik
  • For the same, what are the attributes for the height width the <img> - so that the browser initially knew what size to render it, even before the picture is loaded. We noticed, probably, that on some sites it happens that the text constantly jumps as the pictures are loaded - this is the case when these attributes are not filled. - Sasha Omelchenko
  • let's say there are 3 breakpoints, you need to generate 3 pictures for each breakpoint + for each breakpoint for retina displays - this turns out 6 pictures, but you can’t use 3 pictures of everything - ruslik
  • For example, a picture of 1280 px in width, there is a copy of 640 and 320, I can use the picture 640 as a retina for a resolution of 320 - ruslik
  • Can. srcset one address in <source> for srcset : srcset="images/ordinary.jpg" - Sasha Omelchenko

You can use the srcset attribute (HTML5)

The attribute can be used instead of src and allows you to specify different URL images. The attribute value is one or more comma-separated strings. Each line includes:

  1. Image file URL

  2. optionally whitespace followed by one of:

    - the value of the viewport width (it must be a positive integer followed by the symbol “ w ”). The width of the descriptor is divided by the size of the pixel density.
    - the pixel density value (a positive number followed by the “ x ” character) is, by default, 1x .

You can through media request + :after + background-image .