使用<picture>标签时如何修复PageSpeed Insights的图片无显式宽高警告

首先要戳破一个普遍的认知误区：img标签上的width和height属性，作用是标记图片的原生物理像素尺寸，而非强制规定图片的最终渲染大小。现代浏览器对这两个属性的处理逻辑，是提取两个数值计算出固定宽高比，在图片资源还没加载完成时就提前预留对应比例的布局空间，最终图片的实际显示尺寸完全由CSS规则决定，根本不会被属性值固定锁死。

具体操作步骤 #

1. 给picture内部的img标签补充显式的宽高属性，属性值填写该系列响应式图片的原生物理像素尺寸即可——只要所有不同断点、不同格式的响应式版本图片保持统一宽高比，直接填写最大尺寸版本的原生像素值完全没问题。
   针对你给出的示例（所有版本图片均为1:1正方形比例，最大版本原生尺寸为500x500px），修改后的代码结构如下：

   <picture>
       <source srcset="https://via.placeholder.com/150.webp" media="(max-width: 768px)" type="image/webp">
       <source srcset="https://via.placeholder.com/150.png x1, https://via.placeholder.com/300.png x2" media="(max-width: 768px)" type="image/png">
       <source srcset="https://via.placeholder.com/500.webp" type="image/webp">
       <source srcset="https://via.placeholder.com/500.png" type="image/png">
       <img 
           src="https://via.placeholder.com/500.png"
           width="500"
           height="500"
           alt="响应式示例图"
       >
   </picture>
   

2. 补充基础CSS规则，不需要媒体查询，不需要!important：

   picture img {
       max-width: 100%;
       height: auto;
   }
   

方案合规性说明 #

• 完全匹配PageSpeed Insights的检测要求：img标签携带的显式宽高值会让浏览器在图片资源加载完成前，就计算出正确的宽高比，提前预留对应高度的布局空间，从根源上消除图片加载导致的布局偏移，CLS表现达标。
• 完全保留响应式适配能力：max-width:100%会限制图片最大宽度不超过父容器边界，height:auto会让图片高度跟随宽度按比例自动缩放，移动端容器宽度较小时，图片会自动缩小到适配尺寸，绝对不会被硬拉成500px的固定宽度，完全匹配响应式设计的需求。
• 这种逻辑下根本不需要写媒体查询去覆盖属性值，更不需要加!important，从根源上避免了非规范的hack写法，所有规则均符合HTML与CSS官方规范。

特殊场景处理 #

如果不同断点的响应式图片存在宽高比不一致的情况（这类设计本身就容易引发布局偏移，最优方案是尽量统一所有版本的宽高比），可以在给img设置原生宽高属性的基础上，通过CSS媒体查询在对应断点调整aspect-ratio属性值，同样能让浏览器提前获取布局占位信息，不会触发PageSpeed的警告。

常见避坑点 #

• 宽高属性必须填写图片原生的物理像素值，不能填百分比、auto这类非数值，否则浏览器无法正确计算宽高比，依旧会触发警告。
• 不要在CSS中给img硬写固定高度值，保持height:auto的规则即可，避免和占位计算逻辑冲突。
• 哪怕使用srcset的x倍图、w描述符规则，只要源图的宽高比和img标签上的宽高比值保持一致，就不会出现适配问题。

内容的提问来源于stack exchange，提问作者Vadim Hulevich