Including the imagesloaded.js library causes <source srcset> images to load two versions of the image, increasing bandwidth by ~4x
zaneclaes opened this issue · comments
I noticed that the images on my site were being loaded twice (once as a jpg, once as a webp), which was killing my Lighthouse score. I looked through the <picture> HTML code and couldn't find anything wrong. I finally chased the double-load down to this function in imagesloaded.
The imagesloaded code creates a second proxy image in the background, loading it as a clone via the original <img src>. However, this forces the browser to load a non-optimized version of the image despite the presence of a <source srcset>, since the proxy image is not managed. In my case, this means it forces the browser to load the largest possible variant of the JPG hero image, increasing the bandwidth used by every page on the site by ~4x.
The bug happens in the following conditions:
- Website merely includes
imagesloaded.js - Website uses
<picture><source srcset><img>convention.
I switched my WordPress theme back to TwentyTwenty to verify that it also happened there, too.
I'm curious @zaneclaes did you ever find a solution here? I'm noticing the same behavior.
imagesLoaded v5 has been released with proper support for srcset and <picture> This issue should now be resolved.