As you typeset a img for smartphones?

Hi all.
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, 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?
April 3rd 20 at 17:25
2 answers
April 3rd 20 at 17:27
In this matter will help common sense and testing.

Suppose we have an abstract background image as part of the UI. In most cases, for such images it is enough to have a coefficient of 1x - 1.5 x.

If the image is more detailed - set to begin with the factor 2 and see how it looks on a live smartphone. Factor 2 usually is more than enough for detailed images or photos.

Ratio greater than 2 may require, except that diagrams with thin lines.
April 3rd 20 at 17:29
Just insert the img without any source.
But for the slider (for example on the main page), if possible, you can use the source below on the desktop to show a broad picture, and the mobile vertical.

Find more questions by tags CSSHTMLLayoutAdaptive design