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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.