On my website I got 2 requirements for my image which fills the whole screen and thus should be optimized in loading time:
This seems like a frequent requirement to me, but I still could not find optimal answers for that.
srcset
attribute and sizes
attribute should solve itloading="eager"
(is default anyway) and fetchPriority="high"
. But the latter is not supported by FirefoxSo 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?
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/