html - 如何根据屏幕尺寸预加载正确数量的图像？

Question

我正在努力优化 Largest Contentful Paint (LCP)，但无法根据设备大小预加载正确数量的 LCP 候选图像。

问题:

• 在小屏幕上，单个图像显示在轮播中
• 在较大的屏幕上，最多可以显示四张图片
• 我无法控制所述图像的大小，这意味着任何图像都可以成为 LCP 候选对象
• 在小型设备上加载全部四张图片是行不通的:浪费带宽并影响性能

所需的解决方案:

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

我的第一个想法是显而易见的，使用 link els 的 media 属性来决定加载什么；然而，无论如何，所有资源都会被下载(引用 1 , 2 )。

我不喜欢我目前最好的“解决方案”:使用 link 的 imagesrcset + imagesizes 属性来加载第一张图片不管怎样，后面的图片在小型设备上为 1px x 1px。

例如

<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-tiny 1w 1h, image2-small 100w 200h, image2-large 200w 400h" 
  imagesizes="(max-width: 40em) 1px, 400px"
>

显然非常 hacky。有这样做的“正确”方法吗？我错过了什么吗？

Answer 1

所以它使用 media 属性用于 type="image" 的 link does 工作.

经验教训总是测试我阅读的内容:)

因此，以下工作可以解决手头的问题:

<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)"
>