防抖关键是在第一帧预留准确高度，需在img标签中写原生width和height属性（纯数字），配合css的max-width:100%;height:auto;或容器aspect-ratio实现响应式不抖动。

大图加载时的排版抖动，本质是浏览器没提前知道它该占多大空间，等图片一进来，下方内容就被顶下去。防抖的关键不是等图加载完再排，而是**在第一帧就预留准确高度**。

必须写原生 width 和 height 属性

哪怕图很大，也要在 <img> 标签里写上原始像素尺寸：

• 比如一张 2400×1600 的横幅图，就写 width="2400" height="1600"
• 值必须是纯数字，不能带单位（width="2400px" 或 width="100%" 都无效）
• 只写一个也行，比如 width="800"，浏览器会按原图比例自动算高，不变形
• 两个都写但比例不对（如原图 3:2 却设成 1:1），图会被拉伸模糊

响应式场景下保稳定+能缩放

硬编码像素值不等于放弃响应式，关键是“HTML 定结构，CSS 控缩放”：

响应式烟草公司HTML5网站模板

响应式烟草公司HTML5网站模板是一款适合提供各种不同种类的优质烟草公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• CSS 加上：img { max-width: 100%; height: auto; }
• 这样首帧靠 HTML 属性预留空间，加载后靠 CSS 自适应宽度，不抖也不失比例
• 如果想更现代一点，可叠加 aspect-ratio，但必须 fallback：
  @supports (aspect-ratio: 1) { .img-wrapper { aspect-ratio: 3/2; } }，同时保留 HTML 的 width/height

用容器 + aspect-ratio 更干净（推荐现代项目）

直接给包裹容器设宽高比，比操作 <img> 标签本身更可控：

• 用块级容器包住图片：<div class="hero-img"><img src="..."></div>
• CSS 写：.hero-img { display: block; width: 100%; aspect-ratio: 3/2; }
• <img> 自身设：width: 100%; height: 100%; object-fit: cover;
• 别给容器设 height 或 max-height，否则会覆盖 aspect-ratio

懒加载时别漏掉占位图

loading="lazy" 本身不防抖，它只是延迟请求，不解决空间预留问题：

• src 必须有有效值——哪怕是个极小的占位图，例如：
  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
• 绝对不要留空 src、只写 data-src 或 loading="lazy" 就不管了
• 关键区域建议配合 IntersectionObserver 提前加载，比如 rootMargin: '300px'，避免滚到才白屏