PageSpeed CLS优化：Bootstrap站设图片宽高如何保留响应式

给图片设置原生width和height属性完全不会破坏Bootstrap响应式布局，这反而是目前解决图片类CLS问题的官方推荐标准方案，具体落地逻辑和操作步骤如下：

• 核心逻辑：写在<img>标签上的width、height属性指代的是图片的原始固有尺寸，不是最终渲染尺寸。现代浏览器拿到这两个值后，会第一时间计算出图片的宽高比，在图片资源加载完成前就预留好对应比例的占位空间，从根源避免图片加载后挤压周边内容导致的布局偏移。
• 响应式兼容逻辑：Bootstrap默认内置了响应式图片规则，全局img标签默认带max-width: 100%; height: auto;样式，该CSS规则优先级远高于HTML标签上的宽高属性，会自动让图片按父容器宽度等比缩放，根本不会出现固定宽高撑破布局的问题。如果是老版本Bootstrap，只需要给图片加上内置的img-fluid类即可自动适配响应式要求。
• 标准写法示例：假设你的商品主图原始尺寸为1200px宽、800px高，直接按如下方式写代码即可，不需要额外加其他特殊处理：

<img 
  src="/storage/product-main.jpg" 
  alt="商品主图"
  width="1200"
  height="800"
  class="img-fluid"
>

• 避坑提醒：
  • 不要在CSS里给图片写死固定像素宽高（比如width: 300px; height: 300px），这种写法才会破坏响应式效果，HTML标签上的原生宽高属性仅用于浏览器计算占位，不会干预CSS的渲染规则。
  • 如果页面用了CSS背景图，不要直接空着容器尺寸等背景图加载撑开，要提前给容器设置aspect-ratio属性固定宽高比，或者用padding-top的经典宽高比占位方案预留空间，否则背景图加载同样会触发CLS问题。
  • 如果用了懒加载，占位图的宽高比必须和真实图片完全一致，不要用任意尺寸的透明底图凑数，否则依然会产生布局偏移。

这套方案所有现代浏览器全兼容，Bootstrap从4.x版本开始就默认适配了这套逻辑，不需要额外修改框架底层代码，改完之后跑PageSpeed就能看到图片相关的CLS报错直接消失，响应式效果也不会受任何影响。

内容的提问来源于stack exchange，提问作者Daniel Due