2

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 class="hidden lg:inline object-cover rounded-l-xl  max-w-xl">
    <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>
Edouard WILLEMS
  • 41
  • 7
  • i think what I got so far is, to install this package https://github.com/riverskies/laravel-mobile-detect, and then in the view make the downlaod button invisible for the mobile users – Khayam Khan Nov 11 '22 at 11:09
  • Try adding `loading="lazy"` to your image tag, open the network tab and see if it loads both sources. https://stackoverflow.com/a/60405256/909973 – bassxzero Nov 11 '22 at 11:12
  • I'm sorry if my question was not clear enough @KhayamKhan, what I mean by no download is not a button to download the image, but downloading the image by being in the DOM, but I will try to just remove the picute tag if a mobile is detected with this package. – Edouard WILLEMS Nov 11 '22 at 12:21
  • @bassxzero Yes it works thank you, I had forgotten the lazy loading – Edouard WILLEMS Nov 11 '22 at 12:44

1 Answers1

1

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

<img class="hidden lg:inline object-cover rounded-l-xl  max-w-xl" 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">
Edouard WILLEMS
  • 41
  • 7