图片懒加载、预加载、预连接和 fetchpriority 怎么配合？
先理解原理和示例，再练习完整口述与追问。
回答要点
首屏关键图不懒加载；屏外图延迟；明确尺寸与合适资源；提示有成本且不是强制；以 LCP 与网络实测验收。
原理拆解
屏外图片可使用 loading=lazy，或用 IntersectionObserver 在接近视口时提前设置资源，加载后取消观察并处理错误与重试。首屏大图或 LCP 候选图不应盲目懒加载，否则会延迟关键资源发现。为图片写明宽高或 aspect-ratio，避免加载后撑开布局造成 CLS，配合 srcset、sizes 和现代格式选择合适分辨率与压缩质量。
preload 用于较早声明即将需要的关键资源，要设置正确 as、跨域模式与匹配的 URL，响应式图片还需匹配 imagesrcset/imagesizes，避免预载一个版本、实际又下载另一个。preconnect 提前建立到关键来源的连接，数量过多会浪费连接和握手资源；dns-prefetch 的提前工作更少。fetchpriority 提供优先级提示，不能保证绝对执行顺序，也不能把所有图片都设为 high。
图片下载结束不代表解码和显示已完成，大图处理还要看解码、内存和绘制成本。图片失败提供明确替代状态，弱网下避免无限重试。最终使用网络瀑布与 LCP、CLS 等指标确认改动有效，并比较首访、缓存命中与移动设备环境，而不是只看图片是否用了 lazy 属性。
示例与推演
首屏 hero 图在 HTML 中尽早发现，可按需要 fetchpriority=high；文章下方图 lazy，并写 width/height 预留比例。若 CSS 背景图很晚才发现，评估匹配的 preload；跨域字体需确保 preload 的 crossorigin 模式与实际请求一致，避免重复下载。
易错点
优先级提示不是固定执行命令。把全部资源都 preload/high 会互相竞争，LCP 图也不应不加判断地延迟加载。
参考回答可直接练习口述
屏外图片可使用 loading=lazy，或用 IntersectionObserver 在接近视口时提前设置资源，加载后取消观察并处理错误与重试。首屏大图或 LCP 候选图不应盲目懒加载，否则会延迟关键资源发现。为图片写明宽高或 aspect-ratio，避免加载后撑开布局造成 CLS，配合 srcset、sizes 和现代格式选择合适分辨率与压缩质量。