How can I disable the browser from loading an image at a certain screen size?

Question

css

1.Tell me, there is an image that is in the block, it is hidden through css when the screen size is less than 767px, but of course, the browser loads it from the markup and the get request goes.
At this size, in order not to load the given image into an empty one, I tried using the sizes=(min-width: 767px) attribute, but judging by the browser, it still loads it.

Does the sizes attribute only work with srcset?
Or how it is possible to solve the moment here?

2. The second question, if the background is set in css, one is simply , and the second in the media query for a certain size, the browser will also try to load both of them and will the get request go?

Answer 1

1. For pictures there is such a tag as picture
Allows you to load the desired image depending on the size of the window, load various image formats, in case one is not supported.
2. What prevents wrapping both conditions in a media query?

@media screen and (max-width: 767px) {   
    .img{
    	background-image: url(http://...);
    } 
}

@media screen and (min-width: 768px) {      
    .img{      
    	background-image: url(http://...);
    } 
}

Answer 2

and the second in a media query for a certain size, the browser will also try to load both of them and the get request will go?

If through the media, it will turn (start loading) to the second picture only when it is needed. In your case, it's only when the resolution is reached in the media query