PageSpeed加载错误响应式图片问题排查与解决咨询

问题背景 #

配置了<picture>标签的srcset和sizes属性后，PageSpeed移动端检测（基于412px屏幕）未加载预期尺寸的图片，即使新增适配尺寸后仍存在加载过大图片的问题。

初始代码配置 #

<picture>
  <source srcset="https://www.shop-naturpur.de/media/image/opc/xs/yogi-tea-aktion2.webp 182w,
                  https://www.shop-naturpur.de/media/image/opc/sm/yogi-tea-aktion2.webp 380w,
                  https://www.shop-naturpur.de/media/image/opc/md/yogi-tea-aktion2.webp 456w,
                  https://www.shop-naturpur.de/media/image/opc/lg/yogi-tea-aktion2.webp 1218w,
                  https://www.shop-naturpur.de/media/image/opc/xl/yogi-tea-aktion2.webp 2513w"
          sizes="100vw" media="(min-width: 992px)" type="image/webp">
  <source srcset="https://www.shop-naturpur.de/media/image/opc/xs/yogi-tea-aktion-mb.webp 182w,
                  https://www.shop-naturpur.de/media/image/opc/sm/yogi-tea-aktion-mb.webp 380w,
                  https://www.shop-naturpur.de/media/image/opc/md/yogi-tea-aktion-mb.webp 456w,
                  https://www.shop-naturpur.de/media/image/opc/lg/yogi-tea-aktion-mb.webp 1218w,
                  https://www.shop-naturpur.de/media/image/opc/xl/yogi-tea-aktion-mb.webp 991w"
          sizes="92vw" media="(max-width: 991.98px)" type="image/webp">
  <source srcset="https://www.shop-naturpur.de/media/image/opc/xs/yogi-tea-aktion2.jpg 182w,
                  https://www.shop-naturpur.de/media/image/opc/sm/yogi-tea-aktion2.jpg 380w,
                  https://www.shop-naturpur.de/media/image/opc/md/yogi-tea-aktion2.jpg 456w,
                  https://www.shop-naturpur.de/media/image/opc/lg/yogi-tea-aktion2.jpg 1218w,
                  https://www.shop-naturpur.de/media/image/opc/xl/yogi-tea-aktion2.jpg 2513w"
          sizes="100vw" media="(min-width: 992px)">
  <source srcset="https://www.shop-naturpur.de/media/image/opc/xs/yogi-tea-aktion-mb.jpg 182w,
                  https://www.shop-naturpur.de/media/image/opc/sm/yogi-tea-aktion-mb.jpg 380w,
                  https://www.shop-naturpur.de/media/image/opc/md/yogi-tea-aktion-mb.jpg 456w,
                  https://www.shop-naturpur.de/media/image/opc/lg/yogi-tea-aktion-mb.jpg 1218w,
                  https://www.shop-naturpur.de/media/image/opc/xl/yogi-tea-aktion-mb.jpg 991w"
          sizes="92vw" media="(max-width: 991.98px)">
  <img src="https://www.shop-naturpur.de/media/image/opc/xl/yogi-tea-aktion2.jpg"
       srcset="https://www.shop-naturpur.de/media/image/opc/xs/yogi-tea-aktion2.jpg 182w,
               https://www.shop-naturpur.de/media/image/opc/sm/yogi-tea-aktion2.jpg 380w,
               https://www.shop-naturpur.de/media/image/opc/md/yogi-tea-aktion2.jpg 456w,
               https://www.shop-naturpur.de/media/image/opc/lg/yogi-tea-aktion2.jpg 1218w,
               https://www.shop-naturpur.de/media/image/opc/xl/yogi-tea-aktion2.jpg 2513w"
       sizes="100vw"
       alt="27% Rabatt auf ausgewählte YOGI TEA Sorten in unserem Shop. Aktion bis 30.09.2025">
</picture>

预期与实际结果 #

• 预期：PageSpeed移动端加载第二个<source>标签的380w WebP图片（412px屏幕的92vw约为379px，匹配380w）。
• 实际：加载了991w（xl规格）的图片。

更新后的代码与问题 #

新增663w、664w等尺寸图片后，代码如下：

<source srcset="https://www.shop-naturpur.de/media/image/opc/sm/annes-feinste-aktion-mb.webp 380w,
                https://www.shop-naturpur.de/media/image/opc/md/annes-feinste-aktion-mb.webp 456w,
                https://www.shop-naturpur.de/media/image/opc/513/annes-feinste-aktion-mb.webp 513w,
                https://www.shop-naturpur.de/media/image/opc/663/annes-feinste-aktion-mb.webp 663w,
                https://www.shop-naturpur.de/media/image/opc/664/annes-feinste-aktion-mb.webp 664w,
                https://www.shop-naturpur.de/media/image/opc/998/annes-feinste-aktion-mb.webp 998w,
                https://www.shop-naturpur.de/media/image/opc/lg/annes-feinste-aktion-mb.webp 1218w" 
        sizes="92vw" media="(max-width: 991.98px)" type="image/webp">

• 问题：PageSpeed仍提示加载了664w图片，远大于实际显示尺寸380px。

问题原因 #

1. srcset尺寸顺序混乱：初始代码中第二个<source>的srcset里，1218w的图片排在991w前面，尺寸顺序颠倒。浏览器解析srcset依赖从小到大的有序列表，乱序会导致选择逻辑出错，大概率直接选最大的可用尺寸。
2. 忽略设备像素比（DPR）：PageSpeed使用的移动端设备（如Pixel 3）是2x DPR，浏览器会按「显示尺寸 × DPR」计算所需图片宽度。412px屏幕下，92vw的显示宽度是379px，乘以2x DPR就是758px——初始配置没有这个尺寸，只能选991w；更新后663w/664w仍小于758px，浏览器会跳过这些选更大的尺寸。
3. sizes声明与实际布局不符：如果图片父容器有max-width、padding等限制，实际显示宽度可能不是92vw，导致浏览器按错误尺寸计算需求。
4. viewport配置缺失：若页面未添加正确的viewport标签，浏览器会用桌面端视口宽度渲染，sizes计算完全失效。

解决步骤 #

1. 按尺寸从小到大排序srcset：所有srcset中的图片必须按宽度升序排列，比如初始代码中第二个<source>调整为：

<source srcset="https://www.shop-naturpur.de/media/image/opc/xs/yogi-tea-aktion-mb.webp 182w,
                https://www.shop-naturpur.de/media/image/opc/sm/yogi-tea-aktion-mb.webp 380w,
                https://www.shop-naturpur.de/media/image/opc/md/yogi-tea-aktion-mb.webp 456w,
                https://www.shop-naturpur.de/media/image/opc/xl/yogi-tea-aktion-mb.webp 991w,
                https://www.shop-naturpur.de/media/image/opc/lg/yogi-tea-aktion-mb.webp 1218w"
        sizes="92vw" media="(max-width: 991.98px)" type="image/webp">

2. 补充适配DPR的图片尺寸：针对2x DPR的移动端，补充760w左右的图片，让浏览器能匹配需求，避免加载过大图片。
3. 验证sizes准确性：用浏览器开发者工具查看图片实际渲染宽度（computed样式），如果和92vw不符，调整sizes值匹配实际宽度（比如直接写380px代替92vw，减少单位计算误差）。
4. 添加正确的viewport标签：确保页面头部有：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

5. 强制刷新缓存：修改图片文件名或添加版本参数（如?v=2），避免浏览器或PageSpeed缓存旧资源。

内容的提问来源于stack exchange，提问作者Andriy Lesyuk