Bad evaluation LCP and Best Practices on picture tag

On this page (https://www.kortic.com/photographie/skateboard-volant.html) , Lighthouse matches only the src tag and ignores the source tags. So LCP is wrong. It says :

Largest Contentful Paint element 1 element found

Skateboard (volant) <img decoding="async" loading="lazy" src="/images/card/950/643c16e4/skateboard-volant-2.jpg" alt="Skateboard (volant)" aria-labelledby="imgContentInfo" itemprop="contentUrl">

Additionnaly, the evaluation of best practice “Serves images with low resolution” is wrong too on the same element : Displayed size | Actual size | Expected size 360 x 360 | 420 x 420 | 945 x 945

However, only the “/images/card/420/643c16e4/skateboard-volant-2.jpg” is loaded on mobile.

The original source is :

<picture>
<source media="(max-width: 29.9375rem)" srcset="/images/card/420/643c16e4/skateboard-volant-2.jpg">
<source media="(min-width: 30rem) and (max-width: 63.9375rem)" srcset="/images/card/500/643c16e4/skateboard-volant-2.jpg">
<img decoding="async" loading="lazy" src="/images/card/950/643c16e4/skateboard-volant-2.jpg" alt="Skateboard (volant)" aria-labelledby="imgContentInfo" itemprop="contentUrl">
</picture>

[connorjclark]

I made a minimal repro here: https://misc-hoten.surge.sh/lh-11895-picture-lcp/

The LCP is wrong …

The picture element actually does not work without an accompanying img element. Try removing the media attributes + removing the img element: you’d expect the first source image to be used, but nothing is drawn, because there’s no img. The img element is the container used to draw a picture.

Since the LCP element should be the element where the largest content is drawn, identifying the img inside picture seems to be working as intended. I’ll reach out to folks on the Chrome metrics team and confirm if this behavior is intentional.

Some things Lighthouse team should check:

• Should we special-case how we show what the LCP element is for img inside picture? At least delete the src in the snippet, or just point to the picture instead?
• Do we directly use the specific node identified as the LCP for further analysis as an img element? I see we do in at least one place (preload-lcp-image)–is there also something in Lantern?

Additionnaly, the evaluation of best practice “Serves images with low resolution” is wrong …

This audit doesn’t check if an image element has an associated network resource. We just assume any image element is fair game to analyze. There is a filter for “is this image in the initial viewport”, so I think we can argue that we should also filter out “invisible” img elements (I mean–verify that an image element actually has a network request for its src).

Lighthouse team: it seems we want to do a normalization pass when using artifacts.ImageElements, to take in account the picture behavior. Are there places other than image-size-responsive we need to apply this?

[craigs100]

Thanks, wasn’t sure if it was this issue or not. Will raise another.

Thanks