I've been trying to use responsive+lazyload images on my website, and I created the following piece of code:

<source type="image/webp" media="(max-width: 768px)" data-srcset="myimage_480_252.webp 480w, myimage_680_357.webp 680w, myimage_768_403.webp 768w">
<source type="image/webp" media="(min-width: 769px)" data-srcset="myimage_1024_538.webp 1024w, myimage_1600_840.webp 1600w">
<source type="image/png" media="(max-width: 768px)" data-srcset="myimage_480_252.png 480w, myimage_680_357.png 680w, myimage_768_403.png 768w">
<source type="image/png" media="(min-width: 769px)" data-srcset="myimage_1024_538.png 1024w, myimage_1600_840.png 1600w">
<img data-src="myimage_800_420.png" class="lazyload" alt="My image">

I tested it with the last version of Google Chrome and the mobile viewport. If I browse the 'Network' tab, when I scroll down to the image, Chrome loads the '1600_840.webp' version, when I expected that the 480, 680 or 768 width images were loaded.

As far as I understand, the web-browser checks the mobile viewport's width, and then load the appropriate version of the image. I tried with the 'Responsive' option of mobile devices, and also with 'Surface Duo' (width = 540), 'iPad' (width=768) or 'Moto G4' (width=360). But Chrome loads always the 1600 width image.

Any suggestion is welcome.

  • Have you tried experimenting with various forms of media queries? Mar 10, 2023 at 18:12


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.