How to optimize largest contentful paint time of responsive image that fills the whole screen

Question

Objective

On my website I got 2 requirements for my image which fills the whole screen and thus should be optimized in loading time:

1. It's responsive, i.e. bigger screens get better resolutions
2. The LCP of it is optimal low

This seems like a frequent requirement to me, but I still could not find optimal answers for that.

My proposed solution

1. Solving this seems not too hard, usage of the srcset attribute and sizes attribute should solve it
2. For this I've not found a clean solution, yet and I see multiple problems with that:
   • Using an interlaced image reduces the time where the site is completely empty. But this image is still loaded over network
   • Network loading can be optimized with loading="eager" (is default anyway) and fetchPriority="high". But the latter is not supported by Firefox
   • A very low resolution version of the image could be inlined to HTML and later on exchanged with the full res picture as soon as this is loaded. This seems kinda hacky to me and so far a bit buggy (on Firefox the inlined image seems to disappear before the full res image is displayed which results in the image being visible, not visible for a short time and then visible again)

So my question is: Are there any solutions for this that are less hacky then the inlining and replacing solution but are also supported by all big browsers?

Answer 1

In general it sounds like you are on the right track: make the image as smaller as possible, discovered as early as possible, and prioritised will give it the best chance of being displayed quickly.

my image which fills the whole screen

If the image is completely full screen it may not be considered as the LCP element (https://web.dev/articles/lcp - "Elements that cover the full viewport, that are likely to be background elements.")

and fetchPriority="high". But the latter is not supported by Firefox

Firefox is actively working on Fetch Priority (it's already available behind a flag but has not been enabled by default yet).

on firefox the inlined image seems to disappear before the full res image is displayed which results in the image being visible, not visible for a short time and then visible again

You can used the decode property or function to manage this better. Lots more details here (full discloser I wrote this piece): https://www.tunetheweb.com/blog/what-does-the-image-decoding-attribute-actually-do/