There was a question about the layout of the images in the img for smartphones, namely, how do You do it? On the one hand in all the tutorials they write, saying the gamers give a small picture to load faster like this:
<source media="(max-width: 799px)" srcset="small.jpg">
<source media="(min-width: 800px)" srcset="big.jpg">
<img src="big.jpg" alt="picAlt">
BUT almost all mabilok CCS-RATIO more than 1, https://www.mydevice.io/
there at the bottom of the list 99% of models from 1.5 to 4, i.e. for these devices I have/can give pictures by the formula: image size in pixels * the aspect ratio for the pixel
There are several problems:
First, if we take the picture in the layout 300 pixels and under will have a cell phone with 4x css-ratio we need a picture of 1200 pixels, and not every designer is ready to give...
Secondly what about the download speed of the content on the cellphones. If the user is not quick mobile web and he had to go and download a picture of 1200 pixels or more and a high performance can be discussed.
p.s. use of svg is not an option, there are only jpg and png
In General, how you deal with this, can you score all these css ratio and give images 1 1? Maybe I do not understand something in this css ratio?