HTML图片性能取决于写法、格式、尺寸和加载策略；loading="lazy"仅适用于非首屏图，首屏关键图须设loading="eager"；WebP/AVIF通过减小体积提升加载速度；srcset需配合sizes使用；decoding="async"仅优化解码不减少下载时间；构建流程自动化裁切压缩最关键。
HTML 图片本身不决定加载速度，但它的写法、格式、尺寸和加载策略直接决定页面首屏时间和用户感知性能。
图片 <img> 标签的 loading 属性怎么用才有效
现代浏览器支持 loading="lazy"，但它只对「非首屏图片」起作用，且默认行为是 loading="eager"（立即加载）。
- 首屏关键图（如 banner、logo）必须显式写
loading="eager"，否则可能被懒加载阻塞渲染 -
loading="lazy"对background-image无效，只能用于<img>和<iframe></iframe> - Safari 15.4+ 才完整支持，旧版需配合 Intersection Observer 手动实现
- 不要给所有图片加
loading="lazy"：瀑布流或无限滚动中，部分图片会因懒加载触发过晚而“闪入”
WebP / AVIF 格式比 JPEG/PNG 快多少？
不是“快多少”，而是“在相同视觉质量下体积小多少”——这才是影响加载速度的核心。
- WebP 比同质 JPEG 小 25%–35%，AVIF 再比 WebP 小 20%–50%，但 AVIF 编码慢、iOS Safari 16.4+ 才支持解码
-
<picture></picture>回退链必须按兼容性从新到旧排列：<source type="image/avif"></source>→<source type="image/webp"></source>→<img src="fallback.jpg"> - 别用工具“一键转 AVIF”就上线：某些暗部细节多的图转 AVIF 后可能出现色带，需人工抽检
srcset 和 sizes 怎么配才能避免下载大图
只写 srcset 不写 sizes，浏览器无法判断图片显示宽度，大概率下载最大尺寸资源。
-
sizes值必须匹配 CSS 中图片容器的实际宽度（如sizes="(max-width: 768px) 100vw, 50vw"） -
srcset中每个src后要跟x或w描述符：photo-1x.jpg 1x, photo-2x.jpg 2x或photo-400w.jpg 400w, photo-800w.jpg 800w - 用 Chrome DevTools 的 Network → Img → “Disable cache” + 切换 device，看实际下载的是哪个
src，验证是否生效
为什么加了 decoding="async" 还卡顿
decoding="async" 只影响图片解码阶段（CPU），不减少网络下载时间；若图片本身过大或未压缩，它毫无意义。
- 仅对大图（>1000px 宽、>500KB）有可见收益，小图加了反而增加解析开销
- 与
loading="lazy"组合时，解码异步化效果会被懒加载延迟抵消，优先保证尺寸和格式优化 - 真正卡顿常来自主线程阻塞：比如同时解码 10 张 4K WebP，即使 async 也会排队，不如用
fetch()+createImageBitmap()控制并发
最常被忽略的点：图片加载快慢，90% 取决于你有没有在构建流程里自动裁切、压缩、生成响应式版本——手动生成三套尺寸再手动写 srcset，迟早漏掉某张图，或者某次上线忘了更新 sizes 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
