将 <picture> media + srcset 转换为 <img> srcset + 预加载大小

Question

我正在寻找与下面的响应式图像代码等效的代码，我可以用它来预加载正确的文件。 由于

<link rel="preload" as="image">

可以与

imagesizes

和

imagesrcset

（MDN - link#imagesrcset）一起使用，我相当确定它们是一种方法，但我还没有看到它。

<picture>
    <source media="(min-width: 1024px)"
            srcset="image.jpg?w=1000&h=384&auto=format&q=75 1x,
                    image.jpg?w=1000&h=384&auto=format&q=75&dpr=2 2x">
    <source media="(min-width: 708px)"
            srcset="image.jpg?w=700&h=256&auto=format&q=75 1x,
                    image.jpg?w=700&h=256&auto=format&q=75&dpr=2 2x">
    <source media="(min-width: 391px)"
            srcset="image.jpg?w=390&h=256&auto=format&q=75 1x,
                    image.jpg?w=390&h=256&auto=format&q=75&dpr=2 2x">
    <source srcset="image.jpg?w=320&h=256&auto=format&q=75&dpr=2 2x">
    <img src="image.jpg?w=320&h=256&auto=format&q=75" width="400" height="256" alt="" decoding="async" fetchpriority="high">
</picture>

我确实得到了简单版本，但是它省略了

&dpr=2

元素中的所有

2x

/

<picture>

文件 - 或者仅加载

2x

文件（如果我相应地更改它）。

<link rel="preload" as="image" 
  imagesrcset="
    image.jpg?h=256&w=320&auto=format&q=75 320w,
    image.jpg?h=256&w=390&auto=format&q=75 390w,
    image.jpg?h=256&w=700&auto=format&q=75 700w,
    image.jpg?h=384&w=1000&auto=format&q=75 1000w
  "
  imagesizes="
    (min-width: 1024px) 1000px,
    (min-width: 708px) 700px,
    (min-width: 391px) 390px,
    320px
  ">

Answer 1

您可以将

<link>

标签与

rel="preload"

属性一起使用，指定

as="image"

属性来指示它是正在预加载的图像资源。

imagesrcset

标签内不直接支持

imagesizes

和

<link>

属性。相反，您可以使用

href

属性来指定图像 URL 及其宽度，并使用 CSS 中的媒体查询根据视口宽度指定不同的图像大小。这将根据视口大小有效地预加载正确的图像文件，类似于具有

<picture>

和

srcset

属性的

media

元素。

您可以这样做：

<link rel="preload" as="image"
      imagesrcset="image.jpg?w=1000&h=384&auto=format&q=75 1x,
                   image.jpg?w=1000&h=384&auto=format&q=75&dpr=2 2x"
      media="(min-width: 1024px)">

<link rel="preload" as="image"
      imagesrcset="image.jpg?w=700&h=256&auto=format&q=75 1x,
                   image.jpg?w=700&h=256&auto=format&q=75&dpr=2 2x"
      media="(min-width: 708px)">

<link rel="preload" as="image"
      imagesrcset="image.jpg?w=390&h=256&auto=format&q=75 1x,
                   image.jpg?w=390&h=256&auto=format&q=75&dpr=2 2x"
      media="(min-width: 391px)">

<link rel="preload" as="image"
      imagesrcset="image.jpg?w=320&h=256&auto=format&q=75 1x,
                   image.jpg?w=320&h=256&auto=format&q=75&dpr=2 2x">