I've been trying to use responsive+lazyload images on my website, and I created the following piece of code:
<center><picture> <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"> </picture></center>
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.