典型冗余 img 属性包括：src 为空字符串或纯空格、alt 为空且未加 aria-hidden="true"、width/height 与实际不符且无 CSS aspect-ratio、显式声明 loading="eager"。
哪些 img 属性属于典型冗余，该删就删
浏览器对 img 标签的解析有明确默认行为，很多属性写了等于白写，还占体积、干扰可读性。常见冗余项包括：
-
src为空字符串或仅含空格（如src=""或src=" "）——必须替换为有效占位资源，不能直接删 -
alt值为空但未加aria-hidden="true"（如alt=""）——若图纯装饰，应补上aria-hidden="true"；若漏填语义，得补内容，不能留空 -
width/height与实际图片尺寸不符，且没配合 CSS aspect-ratio 控制布局——这类“假尺寸”既不防抖动，也不参与渲染，纯属误导 -
loading="eager"显式声明——这是img默认值，加了反而多 15 字节
loading="lazy" 怎么配才不翻车
加了 loading="lazy" 却在断网/旧浏览器下白屏，根本原因是没给降级兜底。关键不是“要不要懒”，而是“懒完怎么活”。
- 必须确保
src指向一个真实可访问资源：推荐 1px GIF（src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="），而非空值或未部署路径 -
data-src必须静态存在于 HTML 中（SSR 渲染出来），不能靠 JS 动态注入；否则断网时 JS 加载失败，data-src就不存在 - 首屏关键图（如 banner、商品主图）禁用
loading="lazy"，直接写死高清src，避免首屏空白 - IntersectionObserver 初始化代码需内联进 HTML，并做存在性判断：
if (!('IntersectionObserver' in window)) { /* 立即赋值所有 data-src 到 src */ }
VSCode 正则批量清理空/无效属性
别手动一行行删。打开 VSCode 全局搜索（Ctrl+Shift+F），启用正则（点 .* 图标），用以下模式精准定位：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 匹配空
src：src\s*=\s*["']\s*["']→ 替换为src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" - 匹配无效
alt（空或纯空白）：alt\s*=\s*["']\s*["']→ 替换为aria-hidden="true" role="presentation"（仅限装饰图） - 匹配冗余
loading="eager"：loading\s*=\s*["']eager["']→ 直接替换为空 - ⚠️ 注意跳过
<pre class="brush:php;toolbar:false;"></pre>、<code>、<textarea></textarea>内容区域，这些标签里的属性可能有语法意义
响应式图片里最容易被误删的“安全冗余”
srcset 和 sizes 不是越精简越好。有些看似重复的声明，其实是为兼容性或 SSR 渲染留的保底。
立即学习“前端免费学习笔记（深入）”；
-
<img src="fallback.jpg" srcset="small.jpg 480w, medium.jpg 768w" sizes="100vw" alt="HTML图片冗余属性怎么清理？优化资源加载技巧" >中的src是必要 fallback，不能因有了srcset就删掉 -
<picture></picture>结构中，<source type="image/webp"></source>后必须跟一个<img alt="HTML图片冗余属性怎么清理？优化资源加载技巧" >作为非 WebP 浏览器的兜底，这个<img alt="HTML图片冗余属性怎么清理？优化资源加载技巧" >的src不能省 - 自动生成的构建产物（如 Webpack + html-loader 插件输出）有时会保留未使用的
srcset项，需结合 Lighthouse 报告验证是否真被浏览器忽略，而非盲目删除
真正难清理的不是属性本身，而是那些“删了不报错、但某天某个用户场景下突然失效”的组合：比如 loading="lazy" + 空 src + 外部 JS 失败，或者 srcset 里分辨率声明全对，但 sizes 写成了固定像素导致移动端加载桌面图。每次清理后，务必在弱网模拟、禁用 JS、不同设备视口下实测图片是否如期出现。
