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

Question

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

问题：

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

所需的解决方案：

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

我的第一个想法很明显，使用 link els 的 media 属性来决定加载什么；然而，无论如何，所有资源都会被下载（refs 1, 2）。

我不喜欢我目前最好的 'solution'：无论如何，使用 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"
>

显然很老套。有 'correct' 的方法吗？我错过了什么吗？

Answer 1

因此，它使用 media 属性用于 type="image" 的 link 属性 工作。

学到的教训总是测试我阅读的内容:)

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

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

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

How can I preload correct number of images based on screen size?

html

preload

responsive-images

web-vitals

core-web-vitals