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

While optimizing our website, we stumbled about bad Lighthouse values for "Largest Contentful Paint (LCP) Element". The reason here is, that the `` 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 `` has 700kb in file-size.

Lighthouse complains, that the file of this `` source is too large, resulting in a bad LCP value. BUT: using a real browser web-debugger we can see, that the `` 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 `` as the LCP candidate.

Digging around a bit we found this information: "Even though the `` element provides multiple `` options, the `` tag inside `` is still seen as the default fallback-image by browsers" and " Lighthouse prefers `srcset` over `` and `` 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 `` with `srcset` instead of the current `` element:

```

```

Because this syntax is not very intuitive, I personally prefer the "clean" `` and `` 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.

Start by locating the Media/Rendering/Image partial and inspect how its current picture/source markup is generated. Compare the current browser behavior and Lighthouse LCP measurement with the proposed img srcset structure; the issue does not define a final choice or acceptance criteria, so the pros and cons need resolution before implementation.

Written by the indexing model from the issue text.