只写 src 和 alt 不够，必须设置宽高比、校验协议、监听事件并合理使用懒加载。否则会导致布局跳动、首屏变慢、可访问性失效及 CSP 报错。
直接用 <img> 标签插入图片没问题，但只写 src 和 alt 已经不够用了——现代页面会因缺失宽高比、懒加载误用、路径失控或响应式失效，导致布局跳动、首屏变慢、屏幕阅读器失语，甚至触发 CSP 报错。
为什么只写 src 和 alt 会出问题
浏览器拿到一个没尺寸信息的 <img>，初始渲染时盒子高度为 0，等图片下载完再撑开，造成 CLS（累积布局偏移），影响 Core Web Vitals。更隐蔽的是：如果用 CSS 覆盖了 width/height 属性（比如加了 max-width: 100%），浏览器就无法推断原始宽高比，aspect-ratio 失效，CLS 风险照旧。
常见错误现象包括：
- 页面刚打开时文字上蹿下跳
- 首屏 banner 图延迟出现，LCP 指标拉垮
- 手机访问时下载了 2MB 的桌面图，流量白跑
- 图片 404 后留一个透明空框，毫无兜底提示
必须设置宽高比，而不是仅设 width/height 属性
显式写 width="600" height="400" 能防初始跳动，但它是固定像素值，不响应式，且在高 DPR 设备上模糊。正确做法是用 CSS 控制容器比例，让图片自适应填充。
立即学习“前端免费学习笔记（深入）”；
- 推荐：用
aspect-ratio: 16 / 9+width: 100%，例如<img src="a.jpg" alt="..." style="aspect-ratio: 16 / 9; width: 100%;"> - 兼容旧版 Safari（≤15.3）：改用
position: relative; height: 0; padding-bottom: 56.25%（16:9 对应值） - 禁用
min-height或max-width单独撑高——它们不参与初始布局计算，无法阻止盒模型塌陷
loading="lazy" 不能乱加，首屏图必须 eager
loading="lazy" 是原生懒加载开关，但它按「进入视口」触发请求。对 banner、主图、登录头像这类关键图像，加了反而拖慢 LCP。
- 关键图：省略
loading属性（默认eager），或显式写loading="eager" - 非首屏图（如列表页第 3 张起、文章末尾相关图）：才加
loading="lazy" - Safari 兼容注意：iOS 15.4+ 才完整支持，若需全平台覆盖，得 fallback 到
IntersectionObserver
src 必须校验协议，且 error/load 事件要成对监听
src 不只是路径，是潜在执行入口。用户可控的图片（如评论上传、富文本插入）若未过滤，可能被注入 javascript: 协议或空 src 导致重复请求。
- 动态
src必须白名单校验：只允许http:、https:、data: - 必须监听
load和error事件，且处理逻辑分离：成功时可加 class，失败时必须真实替换img.src = '/fallback.png' - 禁止在
load回调里再次setAttribute('src', ...)——会导致二次请求，尤其当原src已存在时
真正难的不是“怎么插图”，而是让每张图在任意设备、任意网络、任意辅助工具下都稳、快、可读。宽高比、协议校验、事件兜底这些点，漏掉一个，线上就可能变成不可见的性能黑洞或可访问性断点。
