HTML 图片元素在移动设备上下载错误的图像

Question

我正在通过 Google 的页面速度分析器运行一个页面，对于移动设备，它告诉我应该下载适当尺寸的图像。我知道视口大小，但不知道插槽的宽度，因为我们使用的是响应式布局。我查看了文档和一堆示例，但没有一个使用我认为应该是正确的图像。

开发人员工具的“网络”选项卡显示我们正在下载移动版 about.webp，而不是较小的图像（200 像素或 400 像素）。即使将 Chrome 中的设备更改为较小的视口宽度，它仍然会下载 about.webp。

picture使页面速度分析器使用适当图像的元素的正确 HTML 是什么？

下面是我的picture元素。谢谢！

<div class="row"><div class="col-md-3">
    <picture>
        <source type="image/webp" 
            sizes="(max-width: 200px) 200px,
              (max-width: 400px) 400px,
              (max-width: 1500px) 1500px" 
            srcset="//cdn.storyboardthat.com/site-images/articles/education/about-sbt-w200.webp 200w,
//cdn.storyboardthat.com/site-images/articles/education/about-sbt-w400.webp 400w, 
//cdn.storyboardthat.com/site-images/articles/education/about-sbt.webp 1500w">
        <source type="image/png" 
            sizes="(max-width: 200px) 200px, 
              (max-width: 400px) 400px, 
              (max-width: 1500px) 1500px" 
            srcset="//cdn.storyboardthat.com/site-images/articles/education/about-sbt-w200.png 200w, 
//cdn.storyboardthat.com/site-images/articles/education/about-sbt-w400.png 400w, 
//cdn.storyboardthat.com/site-images/articles/education/about-sbt.png 1500w">
            <img src="//cdn.storyboardthat.com/site-images/articles/education/about-sbt.png" 
              alt="Storyboard That" 
              title="Storyboard That" 
              class="lazyload " 
              style="max-width:100%;height:auto;" 
              width="1500" height="400" loading="lazy"> 
    </picture>
</div>

Answer 1

你已经忘记了Device Pixel Ratio（DPR）。

您会看到该<picture>元素基本上对浏览器说“这里有一些选项可供选择，我已经表明了我的偏好，但由您决定您认为最好的图像”。

由于您尚未指定 DPR 首选项，浏览器将使用以下逻辑：

“好的，我有 3 张图像可供选择，我当前的 DPR 是多少？哦，我将 DPR 设置为 3。

此屏幕宽度（320 像素）下的图像有多大？全屏宽度，所以我需要 320 像素的图像。

好的，所以它是 320px * 3 DPR，以确保我拥有与当前显示分辨​​率相匹配的最高质量图像。

所以我需要至少 960px 的图像。我的选择是 200、400 或 1500，我最好选择 1500 图像并对其进行下采样。”

那么如何控制像素密度决策呢？

您可以使用1x、2x等指定像素密度4x。例如：

<img src="default.webp"
srcset="hiddef.webp 2x, heighestdef.webp 4x"
alt="Image description">

然而，根据您当前构建图片元素的方式，它不会完全起作用，因为您无法image 200w与image 2xto结合使用image 200w 2x。

如果您想在所有 DPI 下保留相同的图像，那么您需要将该图像指定 3 次。

<img src="default.webp"
srcset="default.webp 2x, default.webp 4x"
alt="Image description">

否则，如果您希望浏览器根据 DPR 自动更改图像，只需保持<picture>元素不变即可。