In general, there are several questions, but in one direction. For example, we have a block in which there is an image in the background .

 .img-cont { position: absolute; left: 20%; top: 20%; right: 20%; bottom: 20%; background: url(http://agstudio.pro/project/barba/02.jpeg) center / cover; } 
 <div class="img-cont"></div>

We have different permissions, from phones, to 4K screens. In such situations, we go in the wake of the search engines and in all possible ways we try to trim the size and quality of images. About compression is not talking now. Only about permissions.

So how best to write dimension in this case? For .img-cont set the minimum image, and then increase the dimension for different ranges from small through media queries?

 @media screen and (min-width: 600px) and (min-height: 500px) { .img-cont {background-image: url(.../02small.jpeg)} } @media screen and (min-width: 800px) and (min-height: 600px) { .img-cont {background-image: url(.../02middle.jpeg)} } @media screen and (min-width: 1200px) and (min-height: 700px) { .img-cont {background-image: url(.../02big.jpeg)} }

Or set the average resolution? Or is there no difference?

Second moment. Does it even make sense to bother? Or will it be enough to set the minimum size as a standard, and with a single media request, put a large resolution for all but the phones?

Are all of these images loaded from the stylesheet at boot? Or only when sending a request? That is, it is better to put 1-2 options of dimension or more?

If there are more tips on working with images at different screen resolutions, I will be grateful.

    1 answer 1

    For devices with high resolution screens: add the srcset attribute to the img element. This attribute extends the functionality of the img element. allows the browser to select the most appropriate image depending on the characteristics of the device. For example, use 2x images on a 2x screen and, potentially, 1x images on a 2x device with limited network bandwidth:

     <img src="photo.png" srcset="photo@2x.png 2x" ...>

    If the browser does not support the srcset attribute, by default the image file is imported using the src attribute. That is why it is so important to include a 1x image, which can be displayed on any devices, regardless of their properties. If the browser supports the srcset attribute, you can define a list of sources of images and conditions (comma-separated) before the request is received. As a result, only those images that match the parameters of the device are downloaded and displayed. You can set any conditions, from pixel density to image width and height, but at the moment only pixel density is well supported. To ensure that current functionality does not conflict with future developments, continue to assign a 2x image to this attribute. If you want the images to change depending on the characteristics of the device (art direction effect), use the picture element. The picture element specifies a declarative solution to provide multiple versions of one image depending on various device characteristics: size, resolution, destination, etc. Use the picture element if the source of the image has several pixel density options, and also if it’s responsive web design For some types of screens, images with different characteristics are assigned. You can specify several source elements and assign different image files for different media queries or image formats:

     <picture> <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x"> <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x"> <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood"> </picture>

    In the example above, if the browser width is at least 800 pixels, the format will be head.jpg or head-2x.jpg (depending on the screen resolution of the device). If the browser width is from 450 to 800 pixels, the formats head-small.jpg or head-small-2x.jpg are used (also depending on the screen resolution of the device). If we are talking about a screen width of less than 450 pixels and a device with downward compatibility, the picture element will not be supported. In this case, the browser uses an img element to display the image on the screen (it must be enabled). Original article Google about this + Examples Art-direction .