图片约占网页平均总体积的 50%。对开发者来说，图片优化是投入产出比最高的性能提升手段之一——直接影响 Core Web Vitals、页面加载时间和用户体验。
本文涵盖 Web 开发者所需的完整图片优化流程，从格式选择、压缩到响应式图片和交付策略。
图片优化的四个阶段
一套完善的图片优化工作流包含四个阶段：
- 格式选择 — 根据内容选择最合适的格式
- 缩放 — 按实际显示尺寸裁切
- 压缩 — 在可接受的画质下减小体积
- 交付 — 通过响应式图片、懒加载和 CDN 高效分发
每个阶段的优化效果是叠加的。跳过任何一个，都意味着浪费性能空间。
格式选择：WebP vs JPG vs AVIF vs PNG
选择正确的格式是影响最大的单一决策。
| 格式 | 适用场景 | 典型体积（相对未压缩） | 透明度 | 浏览器支持 |
|---|---|---|---|---|
| WebP | 照片 + 图形 | 比 JPG 小 25-35% | 支持 | 97%+ |
| AVIF | 照片 | 比 JPG 小 30-50% | 支持 | 92%+ |
| JPG | 照片（回退方案） | 基准线 | 不支持 | 100% |
| PNG | 图形、文字、透明背景 | 照片场景下比 JPG 大 2-5 倍 | 支持 | 100% |
| SVG | 图标、Logo、简单图形 | 极小（矢量） | 支持 | 100% |
选择决策树
- 不需要透明的照片？ 首选 WebP，JPG 作回退。
- 需要透明的照片？ 使用带 Alpha 的 WebP，PNG 作回退。
- 截图或文字密集的图片？ PNG 或 WebP 无损。
- 图标或 Logo？ 尽量用 SVG，不行就用 8 位 PNG。
- 复杂插画？ 根据颜色数量选 WebP 或 PNG。
BestPNG 的格式转换工具可以直接在浏览器中完成格式转换。
缩放：大多数开发者忽略的最大优化
最常见的图片优化错误是：压缩一张 4000x3000 的照片，然后在 400px 宽的容器中显示。即使用 50% 的 JPG 质量，1200 万像素的图片仍然远大于所需。
经验法则： 图片文件宽度不应超过 CSS 显示宽度的 2 倍（为 Retina 屏幕预留）。
| CSS 显示宽度 | 图片最大宽度 | 原因 |
|---|---|---|
| 400px | 800px | Retina 2 倍 |
| 800px | 1600px | Retina 2 倍 |
| 1200px | 2400px | Retina 2 倍 |
| 全视口（1920px） | 2560px | 合理上限 |
使用 BestPNG 的缩放工具在压缩前将图片缩放到目标尺寸。
网页压缩参数
选对格式并缩放后，进行压缩：
JPG/WebP 压缩
- 首屏大图： 质量 82-88%，目标 200 KB 以内
- 正文配图： 质量 80-85%，目标 100 KB 以内
- 缩略图： 质量 75-80%，目标 30 KB 以内
PNG 压缩
- 8 位（256 色）： 适合图标、Logo、简单图形
- 剥离元数据： 始终移除非必要数据块
- 考虑用 WebP 替代： 超过 100 KB 的 PNG 建议转格式
BestPNG 的压缩工具提供可调节的质量控制，能处理以上所有场景。
响应式图片与 srcset
向所有设备提供同一张图片会浪费移动端带宽。使用 srcset 属性为不同设备提供不同尺寸：
<img
src="image-800.webp"
srcset="
image-400.webp 400w,
image-800.webp 800w,
image-1200.webp 1200w,
image-1600.webp 1600w
"
sizes="(max-width: 600px) 100vw, 800px"
alt="描述"
width="800"
height="600"
loading="lazy"
/>
浏览器会根据当前视口和屏幕密度自动选择最小够用的图片。移动端带宽节省可达 50-80%。
生成多种尺寸
为每张内容图片生成 3-4 种尺寸（如 400、800、1200、1600px 宽）。BestPNG 的缩放工具可以帮你创建这些变体。
懒加载
首屏以下的图片不应阻塞页面初始加载。loading="lazy" 属性会延迟加载，直到图片即将进入视口。
<img src="photo.webp" loading="lazy" alt="描述" width="800" height="600" />
注意： 不要对首屏图片（如 Hero 图、LCP 元素）使用懒加载。这些图片应使用 loading="eager" 或 fetchpriority="high" 立即加载。
CDN 与缓存
通过 CDN 分发图片并设置合理的缓存头：
- Cache-Control： 使用内容哈希文件名时设为
public, max-age=31536000, immutable - CDN： 使用 Cloudflare、AWS CloudFront 等从全球边缘节点分发图片
- Cloudflare R2： 零出站流量费，是图片存储和分发的理想选择
图片 CDN 服务
如需在边缘节点动态缩放和转格式，可考虑 Cloudflare Images、Imgix 或 Cloudinary 等图片 CDN 服务。它们能根据请求参数实时缩放、压缩和转换格式。
构建流水线集成
在构建流程中自动化图片优化：
Next.js
Next.js 内置的 <Image> 组件自动处理缩放、格式转换（WebP/AVIF）和懒加载：
import Image from 'next/image';
<Image
src="/photos/product.jpg"
width={800}
height={600}
alt="产品图片"
/>
静态站点生成器
对于静态网站，使用 sharp、imagemin 等工具在构建时优化图片。
上传前优化
对于用户上传或 CMS 内容，使用 BestPNG 工具在上传前优化。这确保了无论上传者提供什么质量的图片，最终质量都是一致的。
效果评估
使用以下工具追踪图片优化效果：
- Google PageSpeed Insights — 识别未优化的图片，提供 LCP 时间
- WebPageTest — 详细的瀑布图，展示每张图片的加载时间
- Chrome DevTools 网络面板 — 按"Img"筛选，查看单张图片大小和加载时间
- Lighthouse — "正确调整图片大小"和"使用下一代格式"审计项
目标指标
| 指标 | 良好 | 需改进 | 差 |
|---|---|---|---|
| LCP | 2.5 秒以内 | 2.5-4.0 秒 | 4.0 秒以上 |
| 图片总体积 | 500 KB 以内 | 500 KB - 1.5 MB | 1.5 MB 以上 |
| 最大单张图片 | 200 KB 以内 | 200-500 KB | 500 KB 以上 |
常见问题
应该用 WebP 还是 AVIF？
WebP 浏览器支持更广（97%+），作为默认选择更安全。AVIF 生成的文件更小，但编码更慢，支持率为 92%。使用 <picture> 元素同时提供两种格式，以 JPG 作最终回退，可实现最大优化。
客户端压缩够用吗？ 对于用户上传的内容，客户端压缩（如 BestPNG）非常适合——减少上传时间和服务器存储。对于自有网站资源，在构建过程中优化能获得最大控制力。
如何应对 Retina 屏幕？
提供 CSS 显示尺寸 2 倍大小的图片。400px 宽的容器需要 800px 宽的图片。使用带宽度描述符的 srcset，让浏览器自动选择合适的尺寸。
图标应该用 SVG 吗？ SVG 是图标和 Logo 的理想选择——它可以缩放到任意大小而不损失质量，体积通常比等效的 PNG 更小。只要图形足够简单，能用矢量路径表示，就优先用 SVG。
图片格式会影响 SEO 吗？ 间接影响。更快的页面加载（来自优化的图片）改善 Core Web Vitals，而这是 Google 的排名信号。Google 在 PageSpeed Insights 中也推荐使用"下一代格式"（WebP、AVIF）。
总结
图片优化是一个系统性流程：选择正确的格式、缩放到目标尺寸、以合适的质量压缩、高效交付。每一步的优化效果都是叠加的。