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.
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:
imagesloaded.js
<picture><source srcset><img>
convention.I switched my WordPress theme back to TwentyTwenty to verify that it also happened there, too.