What image sizes to choose for responsive?

Question

css

We got our hands on responsive pictures. Hell of a confusing and incomprehensible thing. All these pictureand srcset
all are additionally complicated by the fact that I also undertook to make my own server bicycle - a CDN server that compresses the pictures as I need and puts them in the right folder.
It seems that everything was prepared for implementation, but I got into a stupor - I can’t understand the logic of choosing the image sizes themselves in pixels.
Are there any common solutions, practices? From what in general to repel? From device size statistics, layout design, or something else? And sprinkle it with another dpi, pixel density. The brain is swollen.
How do you choose what sizes to give to the client ???

Answer 1

In modern layout, the vector should be used to the maximum. It removes a lot of problems.
Of course, not all pictures can / need to be distilled into a vector. When using a raster, in general, two pictures are enough - x1 and x2. X1 is the size in which the image is displayed on the site, x2, respectively, is doubled. For example, a picture is 100x100, we make a retina version of 200x200 for it.
Everything else depends on the budget of the project.
There is time / money - we bother. Sawing the third option x3, including polyfills for srcset, making additional sets for breakpoints in media queries.
There is no time / money - we stupidly load doubled sizes everywhere, and indicate the real ones in css.

Answer 2

By and large, it makes little sense to greatly optimize the picture. They just need to be of reasonable resolution and size.
But if you really want to, then look at what resolutions various libraries like bootstrap and others choose.
In my experience, I can say that the best thing for critical (large, full of details, etc.) pictures is best to do three sizes - for the smallest screens (for mobile, with a viewport size up to 600 inclusive), for medium screens (with sizes up to 1920 inclusive) ) and for large ones. And, accordingly, make pictures of the desired size, focusing on each of the screen sizes.
For non-critical - there is no point in doing it, you won’t win much. But if you yourself are pinched to the desired dimensions, you can also pinch them according to the same rules.
Yes, even for optimization - use lazy loading of images (loading on scroll). Image stubs (so that the content does not jump while there is no image) can be done using the generated svg of the required size, such an image will weigh about 500 bytes. For example, at site.ru/svg?x=826&y=800 return svg of the specified size.
Further, to load images not as you scroll, but immediately after the entire page has loaded, you can use link rel="prefetch". Then the whole page will be loaded once, and the "lazy" pictures will be loaded later and put into the cache. And while a person is spinning, they will be loaded from the cache and not over the network.

Answer 3

Obviously, the same as they are on the site, if you have a picture for the entire width of the page, then it should be 4k.