HTML 图片元素在手机上下载错误图片

Question

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

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

让 Page Speed Analyzer 使用适当图像的 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

我看到您使用的代码片段不正确，请参考：

<picture>
  <source media="(max-width:200px)" srcset="about-w200.webp">
  <source media="(max-width:400px)" srcset="about-w400.webp">
  <img src="about-sbt.webp alt="About" style="width:auto;">
</picture>

工作参考link

Answer 2

您忘记了 Device Pixel Ratio (DPR)。

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

由于您没有指定 DPR 首选项，浏览器正在使用以下逻辑：

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

此屏幕宽度 (320px) 下的图片有多大？ 全屏宽度，所以我需要一张 320px 的图片。

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

所以我至少需要一张 960 像素的图片。 我的选项是 200、400 或 1500，我最好选择 1500 的图片并向下采样。

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

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

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

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

如果你想在所有 DPI 上保持相同的图像，那么你将指定该图像 3 次。

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

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

HTML 图片元素在手机上下载错误图片

HTML picture element downloading wrong image on mobile

html

image

webp

responsive-images

pagespeed-insights

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