Html 如何根据屏幕大小预加载正确数量的图像？

我正在努力优化（LCP），但根据设备大小预加载正确数量的LCP候选图像时遇到问题

问题是：

• 在小屏幕上，旋转木马中显示单个图像
• 在更大的屏幕上，最多可以显示四幅图像
• 我无法控制所述图像的大小，这意味着任何人都可以成为LCP候选人
• 在小型设备上加载所有四个映像是不可能的：既浪费带宽又影响性能

理想的解决方案：

• 在小屏幕上只预加载一个图像
• 在大型设备上预加载所有四个图像

我的第一个想法很明显，使用

link

els'

media

属性来决定加载什么；但是，所有资源都已下载（参考文献，）

我不喜欢我目前最好的“解决方案”：在小型设备上使用

link

的

imagesrcset

+

imagesizes

属性来加载第一个图像，并以1px×1px的方式加载后一个图像

例如

---

很明显，我很讨厌。有没有一种“正确”的方法？我遗漏了什么吗？

因此，使用

type=“image”

的

链接的
el的
媒体属性可以显示出来

总是测试我所读内容的经验教训：）

因此，为解决目前的问题，需要开展以下工作：

<link 
  rel="preload" 
  as="image" 
  href="image1" 
  imagesrcset="image1-small 100w 200h, image1-large 200w 400h" 
  imagesizes="(max-width: 40em) 100vw, 400px"
>

<link 
  rel="preload" 
  as="image" 
  href="image2" 
  imagesrcset="image2-small 100w 200h, image2-large 200w 400h" 
  imagesizes="400px"
  media="(min-width: 40em)"
>



<link 
  rel="preload" 
  as="image" 
  href="image1" 
  imagesrcset="image1-small 100w 200h, image1-large 200w 400h" 
  imagesizes="(max-width: 40em) 100vw, 400px"
>

<link 
  rel="preload" 
  as="image" 
  href="image2" 
  imagesrcset="image2-small 100w 200h, image2-large 200w 400h" 
  imagesizes="400px"
  media="(min-width: 40em)"
>