深入理解 HTML img 标签：性能、安全与无障碍最佳实践
在现代 Web 开发中，一个看似简单的 <img> 标签，其实藏着远超'显示图片'的深意。它不仅是视觉呈现的核心载体，更直接关联着页面性能、可访问性体验、搜索引擎优化，甚至安全防护策略。许多开发者习惯性地写下 src 和 alt 就以为万事大吉，却在真实项目中频频遭遇布局跳动、加载卡顿、无障碍支持缺失等问题。
一张图没处理好，可能让你的 Lighthouse 分数骤降，也可能让视障用户完全错过关键信息。我们从实战出发，拆解 <img> 的每一个细节，看看如何把'基础操作'做到极致。
从最基础开始：不只是 src + alt
<img src="example.jpg" alt="示例图片">
这是每个前端初学者都会写的代码。但你知道吗？哪怕这一行里都藏着陷阱。
src 是强制属性，浏览器没有它不会加载图像；而 alt 决定的是语义与包容性。当网络异常、路径错误或屏幕阅读器工作时，alt 就成了唯一的'内容代理'。
所以第一条铁律是：永远不要省略 alt。如果这张图只是装饰，比如背景花边、分隔线之类的，那就明确告诉浏览器和辅助工具：'忽略我'，写成 alt=""。空字符串不等于'没写'，它是有语义的——表示'此图无信息价值'。
反过来，如果是商品主图、数据图表或者文章配图，alt 必须准确传达内容。像 <img src="chart.png" alt="图片"> 这种写法，对无障碍用户来说就是一场灾难。
图片尺寸控制：为什么要在 HTML 中写 width 和 height？
我们经常看到这样的写法：
<img src="avatar.png" alt="用户头像">
也许你会问：CSS 不也能控制大小吗？干嘛非得在标签上加宽高？
答案是：防布局偏移（Layout Shift）。
想象一下，页面先渲染出文字和其他元素，等图片加载回来才发现要腾出一块空间，整个页面突然'往下弹'——这就是典型的 CLS（Cumulative Layout Shift），Google 把它列为 Core Web Vitals 的关键指标之一，直接影响 SEO 排名。
而在 HTML 中声明 width 和 height，浏览器就能提前知道这个图片的宽高比，在资源未加载前预留正确比例的空间。即使你用 CSS 调整最终展示尺寸，只要保持纵横比一致，就能避免重排。
💡 提示：HTML 属性中的
width="100"是像素值，无需单位；CSS 则更灵活，支持 rem、%、vw 等响应式单位。
懒加载原生支持：loading 属性解放双手
过去实现图片懒加载，得靠 Intersection Observer 或第三方库如 LazyLoad.js。如今主流浏览器已原生支持：
<img src= = =>
