图片加载慢主因是html资源调度不当：未设宽高触发回流，缺少loading="lazy"挤占带宽，srcset未配sizes导致错载，avif/webp需picture兜底，属性冲突或失效使优化失效。
图片加载慢，八成不是网络问题，而是 HTML 层面的资源调度没做对——<img> 标签本身不阻塞渲染，但默认行为会让浏览器“等图就绪才布局”，加上没配对的 loading、decoding、尺寸属性，很容易触发强制重排或空盒占位。
为什么 <img> 加载慢时页面会卡顿或跳动
浏览器解析到 <img> 时，若没声明 width 和 height，就无法预留空间，等图片下载完成再计算尺寸，就会触发回流（reflow）；如果图片体积大又没用 loading="lazy"，首屏大量图片并发请求还会挤占关键资源带宽。
-
width和height必须写，且推荐用 CSS aspect-ratio 替代内联值（更灵活），但至少得有占位约束 -
loading="lazy"对非首屏图是刚需，但不要滥用在 banner、logo 等核心图上（可能被延迟加载导致 FOUC） - 避免用
background-image替代<img>做内容图——它绕过loading控制，也无法被爬虫识别
srcset 和 sizes 怎么配才不白写
只写 srcset 不配 sizes，浏览器根本不知道当前容器多宽，只能按设备像素比瞎猜，很可能下错高清图；而 sizes 写死 "100vw" 又容易让侧边栏里的图也拉满全屏宽度，浪费流量。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 典型安全写法：
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"，对应响应式断点下的实际展示宽度 -
srcset中的宽度描述符（如400w）必须和原图真实宽度一致，否则picture切换逻辑会错乱 - 工具链里用
sharp或imagemin生成多尺寸图时，确保文件名含分辨率标识（如hero-800w.jpg），方便人工核对
现代格式（WebP/AVIF）怎么 fallback 才不崩
直接用 <picture></picture> + <source></source> 是标准解法，但很多人漏掉最后的 <img> 兜底，或者把 src 写在 <source></source> 上（无效）——src 只能出现在 <img> 标签里。
<picture><source type="image/avif" srcset="photo.avif"><source type="image/webp" srcset="photo.webp"> @@##@@ </source></source></picture>
- AVIF 虽小但编码慢、兼容性差（iOS 16.4+、Chrome 109+），建议只对静态运营图启用
- WebP 几乎全平台支持，压缩率比 JPEG 高 25%~35%，是当前最稳妥的升级项
- 不要用 JS 动态判断格式再插入
<img src="photo.jpg" alt="描述">——破坏预加载器（preload scanner），首屏图会晚 1~2 个渲染周期
真正卡顿的根源往往藏在「写了但没生效」的属性里：比如 loading="lazy" 被父容器 overflow: hidden 截断导致永远不触发，或者 decoding="async" 写了却没配合 fetchpriority="low"，CPU 解码仍抢占主线程。这些细节不验证，优化就只是改了个标签名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
