Is it possible not to make download image for the mobile users if these images are in display none i-CodePudding

I have a site in Laravel with tailwindcss and I have some articles with images in the desktop version and these images are in display:none for the mobile version, my question is: is it possible not to make to download the image for my mobile users? To make my site faster and less heavy for phones (sorry if I make english mistake, it's not my main languages).

For the moment I use the picture tag with an image of 1 x 1 px with a media query max-width, in order to have a minimal download, but I wonder if there is not a more appropriate technique.

<picture >
    <source media="(max-width: 599px)" srcset="{{asset('img/student-medium.jpg')}}">
    <source media="(min-width: 600px)" srcset="{{asset('img/student.jpg')}}">
    <img src="{{asset('img/student.jpg')}}" alt="photo d'étudiants qui travaillent">
</picture>

CodePudding user response：

Use the attribute loading: lazy on a img tag seem to be a good solution to my problem.

<img  loading="lazy"
src="{{asset('img/student.jpg')}}" srcset="{{asset('img/student-medium.jpg')}} 1x,
{{asset('img/student.jpg')}} 2x" alt="photo d'étudiants qui travaillent">