如何优化全屏响应式图片的LCP时间？求兼容主流浏览器的优雅方案

目标 #

我的网站中有一张全屏展示的图片，需满足以下两项加载优化要求：

• 具备响应式特性，即大屏设备加载更高分辨率的图片
• 其最大内容绘制（LCP）时间尽可能低

这是一项常见需求，但我尚未找到最优解决方案。

我的拟用方案 #

• 响应式适配问题看似不难，使用srcset属性和sizes属性即可解决
• 针对LCP优化，我尚未找到简洁方案，且遇到了诸多问题：
  • 使用隔行扫描图片可减少页面完全空白的时长，但该图片仍需通过网络加载
  • 可通过loading="eager"（默认值）和fetchPriority="high"优化网络加载，但后者不支持Firefox
  • 可将极低分辨率的图片内联到HTML中，待高清图片加载完成后替换，但该方案略显繁琐且存在Bug（Firefox中内联图片会在高清图显示前消失，导致画面短暂空白后再次显示）

因此我的问题是：是否存在比内联替换方案更简洁、且兼容所有主流浏览器的解决方案？

内容的提问来源于stack exchange，提问作者Axel Herrmann