写了 width/height：浏览器先按 160×90 留好位置，图到位后不跳动。
CSS 改宽度后，比例仍按属性里的固有尺寸算，不会先塌陷再撑开。
本示例不请求任何外部图片，图都是内联 SVG，确保离线也能跑。
写了 width/height：浏览器先按 160×90 留好位置，图到位后不跳动。
CSS 改宽度后，比例仍按属性里的固有尺寸算，不会先塌陷再撑开。
alt=""（空字符串），读屏会直接跳过它。title 属性只做鼠标悬停提示，不能替代 alt，而且触屏用户看不到。| SVG | 图标、logo、图表：矢量无损，但不能放照片 |
| WebP / AVIF | 照片首选，同画质体积比 JPEG 小三成上下 |
| JPEG | 兼容性兜底的照片格式 |
| PNG | 需要透明通道、或截图类纯色大块面积 |
| GIF | 动图请用 <video muted loop playsinline> 替代，体积小十倍以上 |
<img src="/img/hero.webp" alt="首页主图" width="1200" height="600" loading="lazy" decoding="async">
loading="lazy" 让首屏外的图等到接近视口才下载；首屏主图不要加，反而该写 fetchpriority="high"。
破图四步排查：① DevTools Network 面板看请求是不是 404；② 路径是否以 / 开头却忽略了站点部署在子路径（本站要带 /nuxt/ 前缀）；③ 文件实际扩展名与代码里写的是否一致（大小写敏感）；④ 本地双击打开能显示、部署后不显示 → 十有八九是相对路径层级问题。