直接删掉 width 和 height 属性前需确认是否真多余：若值与原图宽高比不一致、被 CSS 覆盖、或已用 aspect-ratio 等现代方案防跳动，则可删；否则可能引发布局偏移、LCP 变差。
直接删掉 width 和 height 属性就行，但得先确认它们是否真“多余”——很多场景下它们是防布局跳动的关键，不是 bug，而是 feature。
怎么判断 width 和 height 是真多余还是假多余
浏览器只在 <img alt="HTML怎么清理图片标签多余的宽高属性" > 标签里看到这两个 HTML 属性，就会立刻按数值预留布局空间。如果图片加载慢，这个预留能防止内容突然下移（即 layout shift）。所以“多余”往往是指：
- 值和原始图片宽高比不一致，导致拉伸变形（比如原图 16:9，却写
width="300" height="300"） - 写了但被 CSS 覆盖了，比如
img { width: 100%; height: auto; }，此时 HTML 属性实际不起占位作用，还可能和 CSS 冲突留白 - 响应式项目里，所有图片都用
max-width: 100%+height: auto，但 HTML 里仍硬编码了固定像素值，既没用又难维护 - 服务端渲染或 CMS 输出的 HTML 自动塞了宽高，但源图尺寸经常变，属性值长期失准
删之前必须检查的三件事
盲目删掉可能让首屏性能变差、LCP 拉长、用户看到页面“抖一下”。动手前确认：
- 页面有没有开启
loading="lazy"？如果开了，且图片不在首屏，width/height的占位价值下降，可优先清理 - CSS 里是否已统一写了
img { max-width: 100%; height: auto; }？如果有，且没其他规则覆盖height，那 HTML 属性大概率失效，可删 - 是否用了
aspect-ratio？比如img { aspect-ratio: 16 / 9; width: 100%; }—— 这种现代方案本身就能防跳动，HTML 宽高就成冗余了
批量清理的实操建议
别手动一个一个改，尤其当项目有几十个模板或 CMS 输出时：
立即学习“前端免费学习笔记（深入）”；
- 用正则匹配删除：查找
width="\d+"\s+height="\d+"或height="\d+"\s+width="\d+"，替换成空（注意保留空格和引号结构，避免破坏其他属性） - 如果用 Webpack/Vite，可在 HTML 插件里加 loader，用 cheerio 解析 DOM，对所有
<img alt="HTML怎么清理图片标签多余的宽高属性" >节点调用.removeAttr('width').removeAttr('height') - CI 流程中加 lint 规则：用
html-validate配置attr-no-duplication和img-redundant-alt类似规则，把宽高属性列为警告项 - 删完立刻测 LCP 和 CLS：用 Lighthouse 或 Chrome DevTools 的 Performance 面板对比前后差异，重点看“Layout Shift”事件是否增加
真正麻烦的不是删属性，而是删完之后要补上等效的占位逻辑——要么靠 aspect-ratio，要么靠 JS 注入内联样式，要么靠服务端预读图片尺寸。否则，你只是把“可见的冗余”换成了“不可见的抖动”。
