网站优化 图片优化全指南：WebP、懒加载与 CDN 让首屏快 3 倍

企业官网 60%-80% 的首屏加载时间花在图片上。同一张产品图，未优化 4.8MB、优化后 80KB，视觉上几乎无差别，但首屏速度差 10 倍。这篇文章给出图片优化的完整动作清单：格式、压缩、加载策略、CDN，全部附可执行参数。

一、格式选择：WebP 是当前最优解

实操：内容上传一律转 WebP（质量 80 即可，肉眼无损）；必须兼容老系统时用 <picture> 回退：

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="产品场景图" width="1200" height="630">
</picture>

二、压缩：上传前 + 上传后双保险

• 设计稿导出即压缩：Photoshop 导出选"存储为 Web 所用格式"；或用 Squoosh/TinyPNG 批量压缩后再上传。
• 服务端自动压缩：接入 sharp（Node）或平台图片处理参数（阿里云 OSS：?x-oss-process=image/quality,q_80/format,webp），上传原图、按需输出。
• 尺寸红线：单张图 ≤ 300KB，banner ≤ 500KB；超过就说明压缩不到位。
• 按显示尺寸裁剪：手机端显示 400px 宽的图，不要传 2000px 原图——用 srcset 多尺寸：

<img src="photo-800.webp"
     srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
     sizes="(max-width: 768px) 100vw, 800px"
     alt="产品实拍" width="800" height="600" loading="lazy">

三、加载策略：首屏要快，非首屏要懒

• 首屏大图（LCP 元素）：禁止懒加载！加 fetchpriority="high" 并 preload；框架里用 next/image 的 priority。
• 非首屏图片：全部 loading="lazy"——首屏之外的用户没滚到就不加载，直接省一半流量。
• 宽高必须声明：img 写 width/height 或 CSS aspect-ratio，防止图片加载时页面跳动（CLS）。
• 轮播/弹窗图片：预加载下一张，切换才不卡白屏。

四、CDN 与缓存：让图片走"最近的路"

# 静态图片缓存策略（响应头）
Cache-Control: public, max-age=31536000, immutable

# 配合文件名带内容 hash（photo.3f9a2b.webp）
# 内容更新 = 文件名变化 = 缓存自动失效，永不出现"改了图没生效"

• 图片走 OSS + CDN 后，服务器带宽压力骤降（详见服务器选型篇），且全国访问速度均匀。
• CDN 开启 WebP 自适应：对支持的浏览器自动下发 WebP。

五、验证效果：用数据说话

• Lighthouse 的 LCP 与"图片未优化"诊断项逐条修复。
• Chrome DevTools → Network → Img 过滤，按 Size 排序，揪出漏网大图。
• 优化前后记录对比，示例（某企业官网实测）：

图片优化是投入产出比最高的性能手段：一次配置，长期受益。记住四步口诀——转 WebP、压到位、首屏优先非首屏懒、CDN 加缓存。