PageSpeed Insights seems to be reporting incorrect image URL for <picture> element on Desktop

[Simon Lovejoy]

Hello All,

I'm experiencing an issue with PageSpeed Insights (PSI) reporting what seems to be an incorrect image URL for the 'Properly size images' diagnostic on the desktop version of my page.

Here's the situation:

• I have a <picture> element with multiple <source> elements and an <img> fallback.
• On desktop, the correct image (work-fuse-three-hero-1100x600-desktop.webp) is being rendered.
• However, PSI is reporting the <img> element with the 575w image, but in the URL column, it is showing the 1100w image URL.
• I have checked the rendered DOM and network requests, and the correct image seems to be loading.
• I've tested incognito.
• The LCP seems to be performing well, and all of my images are optimised as far as can be.

Here is a link to the URL where this behaviour is illustrated:

https://www.minelands.com/work/fuse-three.html

Not sure if i am otherwise missing fundamental functionality within PSI here or alternatively not accounting for core web vital requirements correctly?

I can provide more detail if that's of use as well.

[Barry Pollard]

Hi Simon,

This group is for feedback with the Core Web Vitals rather than with Lighthouse so this should really be raised here: https://github.com/GoogleChrome/lighthouse/issues

Saying that, I've had a quick look here and, while I can understand the confusion I don't think anything's wrong here.

<picture>
  <source srcset="/images/work/fuse-three/work-fuse-three-hero-1100x600-xl.webp 1100w" width="1100" height="600" media="(min-width: 993px)">
  <source srcset="/images/work/fuse-three/work-fuse-three-hero-992x500-lg.webp 992w" width="992" height="500" media="(min-width: 992px)">
  <source srcset="/images/work/fuse-three/work-fuse-three-hero-768x500-md.webp 768w" width="768" height="500" media="(min-width: 768px)">
  <source srcset="/images/work/fuse-three/work-fuse-three-hero-576x580-sm.webp 576w" width="576" height="580" media="(min-width: 576px)">
  <img srcset="/images/work/fuse-three/work-fuse-three-hero-575x580-xs.webp 575w" width="575" height="580" class="d-block img-fluid rounded" alt="Fuse Three Finance mobile website header and hero element" fetchpriority="high">
</picture>

The way the <picture> element works is basically by using the <img> element, but its src (or srcset) is effectively replaced by the appropriate <source> element's URL. So Lighthouse is correct to say the element (in the first column) is the <img> element, but the URL (in the second column) is the <source> URL.

The same thing happens in DevTools is you inspect that element - the <img> element is selected:

,Even though you can see the "Current source" does not match the URL from the <img> element you've selected:

The reason for this is the <img> element is actually used and contains other important attributes (e.g. the class and the alt text in your case). It's just it's src attribute is effectively ignored in preference of a better one.

So it's all working as intended.

Thanks,

Barry

--
You received this message because you are subscribed to the Google Groups "web-vitals-feedback" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web-vitals-feed...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/web-vitals-feedback/9e149adb-49cd-4758-92b0-dee1d14cf9abn%40googlegroups.com.

[Simon Lovejoy]

Thanks Barry, much appreciated. I would never have gotten to the explanation you've outlined!