How to replace background images with different resolutions?

Question

Adaptive design

The essence of the question is in the title.
I understand that this can be done through media-quaries, but in this case there is a banal overlap of styles and in this case there are several requests to the server. Or am I wrong about this and only the active style will make an http request?
In any case, I want to hear how best to organize the replacement of src background images in responsive design?
Thank you.

Answer 1

Rather than guessing here, why not do an experiment with a test page and look at the network tab. It will immediately become clear whether the browser downloads all the pictures at once or only for active styles. If too lazy to test, then read here

Answer 2

well, then you will probably have to make a sprite, and again adjust the sizes of the parent block through media queries