Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DISCUSSION] Refactoring Media/Rendering/Image partial using img-srcset instead of <picture> tag for proper Lighthouse measurement #1549

Open
Moongazer opened this issue Jan 29, 2025 · 0 comments

Comments

@Moongazer
Copy link

While optimizing our website, we stumbled about bad Lighthouse values for "Largest Contentful Paint (LCP) Element". The reason here is, that the <img> tag holds a 1280px width generated PNG file. The original uploaded PNG is a photo with transparent background (a special header image) and was offline optimized with a lossy PNG compression (170kb). Unfortunately, the ImageMagick/MagickImage lilbrary on the server only can use loss-less PNG compression, so the generated file for <img> has 700kb in file-size.

Lighthouse complains, that the file of this <img> source is too large, resulting in a bad LCP value. BUT: using a real browser web-debugger we can see, that the <img> src is never loaded for any responsive screen-size (means: this file does not matter at all).

It seems, Lighthouse doesn't simulate real browser behavior here, but instead it scans the DOM and assumes the src of the <img> as the LCP candidate.

Digging around a bit we found this information: "Even though the <picture> element provides multiple <source> options, the <img> tag inside <picture> is still seen as the default fallback-image by browsers" and " Lighthouse prefers srcset over <picture> and <source> elements when deciding the LCP element."

So a possible improvement (or solution) for the described problem would be, to refactor the Media/Rendering/Image partial and only use <img> with srcset instead of the current <picture> element:

<img loading="lazy"
     src="https://example.com/_processed_/f/f/demo-image_91eb3eb456.png"
     srcset="https://example.com/_processed_/f/f/demo-image_7298bd4af0.png 374w,
             https://example.com/_processed_/f/f/demo-image_cc86e5cdc0.png 500w,
             https://example.com/_processed_/f/f/demo-image_c803d2f9f6.png 680w,
             https://example.com/fileadmin/images/demo-image.png 1280w"
     sizes="(min-width: 1400px) 1280px,
            (min-width: 1200px) 1100px,
            (min-width: 992px) 920px,
            (min-width: 768px) 680px,
            (min-width: 576px) 500px,
            374px"
     width="1280" height="960" title="" alt="">

Because this syntax is not very intuitive, I personally prefer the "clean" <picture> and <source> structure. Also from Accessibility (ARIA) perspective the current implementation might be more useful, but not sure about that. We just want to open the discussion here in case someone else having similar problems, so we can collect the pros/cons for both variants if this is helpful. Otherwise feel free to close it to stay with the current solution as final decision.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant