How to remove loading display:none images located in?

Question

css

The bottom line is that there are images for the desktop, and there are for mobile phones and the goal is to make the site as light as possible for mobile devices, thereby speeding up loading.

The problem is that images with display: none are also loaded on the mobile device. And on the desktop, images for mobile phones are loaded accordingly, thereby slowing down the download.

Tried applying media to , but it doesn't work at all.

Here is a sample code

<picture>
<source srcset="img/step1/1.avif" type="image/avif">
<source srcset="img/step1/1.webp" type="image/webp">
<img src="img/step1/1.jpg">
</picture>

Is it possible to remove display:none image loading? Or is there some other way to solve this problem?

Answer 1

Hello, it would be possible to throw off the CSS code, but okay, but in general this is all done through Media queries, as I see it and you know it, but they need to be correctly written
media (min-width: 767px) and (max-width: 767){
.img__for__decstop{
display:none;
}
}

Answer 2

It's easier for me to do this through the sizes attribute:
sizes="((min-width: 600px) and (max-width: 1004px)) 84vw, (min-width: 1005px) 60vw, 100vw"
Here it is written:
https://serpstat .com/ru/blog/kak-ispolzovat-atribu...