图片体积大拖慢首屏渲染，需压缩转WebP/AVIF、用srcset响应式、禁用width/height硬编码、首屏图禁用lazy并设fetchpriority="high"、内容图禁用background-image、慎用第三方CDN服务。
图片体积大直接拖慢首屏渲染
浏览器解析 HTML 遇到 <img> 标签时，会立即发起请求下载图片资源。如果图片未压缩、尺寸远超显示区域（比如用 4000×3000 的 JPEG 展示在 200×150 的容器里），就会产生大量无意义的网络传输和解码开销。
常见现象：页面 HTML 和 CSS 已加载完成，但屏幕长时间空白或占位符卡住，DevTools 的 Network 面板里 img 请求耗时明显高于其他静态资源。
实操建议：
- 用
sharp（Node.js）或squoosh.app（Web 工具）批量转成 WebP/AVIF，同等质量下体积通常减少 40%–70% - 对响应式场景，必须用
srcset+sizes，例如：<img src="cat-400w.webp" srcset="cat-400w.webp 400w, cat-800w.webp 800w, cat-1200w.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw">
- 禁用
width/height属性硬编码，改用 CSS 控制宽高比（如aspect-ratio: 4/3），避免重排
懒加载不是万能解药，loading="lazy" 有边界
原生 loading="lazy" 只对离视口较远的图片生效，且在 Safari 旧版本、部分安卓 WebView 中不支持；更重要的是，它无法解决「首屏关键图片」的加载延迟——这些图本该优先加载，却被当成普通资源排队。
常见错误：给所有 <img> 加 loading="lazy"，结果首页轮播图、产品主图白屏 2 秒以上。
实操建议：
- 首屏图片必须移除
loading="lazy"，并添加fetchpriority="high"（Chrome 109+ 支持） - 对兼容性要求高的项目，用 IntersectionObserver 手动实现懒加载，可精准控制阈值（如提前 300px 开始加载）
- 服务端渲染（SSR）场景下，首屏图片需在 HTML 中直出
src，不能靠 JS 动态插入
CSS 背景图绕过 HTML 解析，但失去语义与优化能力
用 background-image 替换 <img> 确实能避免 HTML 解析阻塞，但代价是：无法被爬虫识别、无法设置 alt 文本、无法响应 srcset 切换、无法触发浏览器预加载器（<link rel="preload"> 对 background-image 无效）。
典型误用：为“优化”而把 Banner 图写成 div { background-image: url(...); }，结果 Lighthouse 报告中「图像缺失替代文本」和「未使用现代格式」双红标。
实操建议：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 装饰性图片（如边框、花纹）才用背景图；内容型图片（产品、人物、图表）必须用
<img> - 若真要用背景图，至少补上
image-set()函数适配分辨率：background-image: image-set("cat@1x.jpg" 1x, "cat@2x.jpg" 2x); - 想预加载背景图？只能靠 JS 创建
new Image().src = url，但时机难控，易造成冗余请求
第三方图片服务不是银弹，CDN 缓存策略常被忽略
接入 Cloudinary、Imgix 等服务后，很多人以为“开了自动压缩就万事大吉”，实际常因配置不当反而更慢：比如未设置 f=auto 自适应格式，导致强刷 WebP 却在 Safari 返回 PNG；或缓存 TTL 过短（Cache-Control: max-age=60），让 CDN 频繁回源拉取原始大图。
容易踩的坑：
- 未开启
q=auto（根据网络条件动态调质），弱网下仍返回 85% 质量图 - URL 中漏传
w/h参数，CDN 不缩放，直接吐原始尺寸 - 本地开发用
localhost调试，但 CDN 域名未配本地 hosts，请求超时降级成本地加载
立即学习“前端免费学习笔记（深入）”；
图片加载速度问题本质是资源粒度、传输路径和渲染时机三者的协同。最常被跳过的一步：上线前用 Chrome 的 “Slow 3G” + “CPU Throttling 4x slowdown” 模拟真实弱网环境，看首屏图片是否在 1.5 秒内可见——这个数字比任何理论都管用。
