img标签必须显式设置width和height属性，以像素值（如width="640" height="480"）声明图片固有尺寸，使浏览器在加载前预留准确空间，防止cls布局偏移、lcp延迟及可访问性问题。
直接说结论：img 标签不是“写完 src 和 alt 就完事了”，现代页面里漏掉 width、height、loading 或 srcset 中任意一个，都可能引发布局抖动、首屏卡顿、高分辨率设备显示模糊等问题。
为什么必须显式设置 width 和 height
浏览器在解析到 <img> 时，如果没提前知道尺寸，会先渲染一个 0×0 占位框，等图片加载完成再重绘——这会导致内容突然下移（CLS 指标飙升），尤其在慢网或大图场景下非常明显。
- 只设
width="300"，height会自动按原始比例计算，不拉伸变形 - 用 CSS 的
max-width: 100%配合预设width/height，才能兼顾响应式与防抖动 - 避免只用 CSS 设置宽高（如
style="width: 300px; height: 200px;"），因为内联样式无法被预解析，起不到防抖作用
srcset + sizes 怎么配才不白写
srcset 不是“多塞几个图就叫响应式”，它必须和 sizes 联动生效。浏览器靠 sizes 判断“当前视口下这张图该占多宽”，再从 srcset 列表里挑最接近的资源。
- 错误写法：
srcset="small.jpg 480w, large.jpg 1200w"却没写sizes→ 浏览器默认按 100vw 算，小屏也可能加载大图 - 推荐写法：
sizes="(max-width: 768px) 100vw, 800px"表示：≤768px 时按屏幕全宽加载，否则固定 800px 宽 - 单位必须一致：
srcset用w（像素宽度），sizes用vw或px，别混用em或%
loading="lazy" 的实际限制和绕过方式
懒加载不是万能的。Chrome 默认对首屏内图片禁用 loading="lazy"，但某些情况它仍会失效：
- 父容器有
overflow: hidden或transform，可能导致浏览器无法准确判断是否进入视口 - 没有预设
width/height时启用 lazy，仍会触发布局抖动（哪怕图还没加载） - 需要强制懒加载首屏图？用
loading="lazy"+fetchpriority="low"组合，但仅 Chromium 支持
路径类型选错，图片就根本不会发请求
src 值写错格式，浏览器连 HTTP 请求都不会发——不是报 404，而是静默失败。
- 相对路径：
src="images/logo.png"→ 相对于当前 HTML 文件位置，移动文件易断链 - 根相对路径：
src="/images/logo.png"→ 从域名根开始算，适合中大型项目，改目录结构不影响 - Data URL：
src="data:image/svg+xml;base64,PHN2Zy..."→ 只适用于极小图标（ - 绝对 URL：
src="https://cdn.example.com/photo.jpg"→ 注意 CDN 是否开启 CORS，否则canvas绘图或截图会失败
真正麻烦的从来不是“怎么写”，而是“为什么写了却没效果”——比如 srcset 列表里放了 2x 图但忘了加 sizes，或者用了 loading="lazy" 却没配尺寸，结果性能没提升反而更卡。这些细节不跑真实设备、不看 Network 面板，光靠本地刷新根本发现不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
