WebP、PNG、JPEG 怎么选？一篇文章讲清楚
选图片格式看起来是小事，但它会悄悄影响网页速度、画质和兼容性。这篇文章用最实用的方式讲清楚三大主流格式，以及每种格式的最佳使用场景。
30 秒结论
- 照片、复杂渐变 → JPEG；受众都用新浏览器就选 WebP。
- 图标、Logo、截图、带文字的图 → PNG。
- 想要最小体积 → WebP。
- 追求极致压缩、能接受较慢编码 → AVIF（WebP 的后继竞争者）。
JPEG：万能的老将
JPEG 从 1992 年沿用至今，地球上所有设备、浏览器、编辑器和 CMS 都能显示它。它采用针对人眼视觉设计的有损压缩：丢弃我们察觉不到的细节，尤其是色彩复杂区域的细节。
优点：
- 兼容性无敌，包括几十年前的老软件
- 照片压缩效率出色
- 质量参数可调，直接控制体积
缺点：
- 不支持透明——透明区域会变成白色或黑色
- 锐利边缘和文字周围会出现“蚊噪”伪影
- 反复编辑保存会快速劣化（代际损失）
网页照片的质量甜蜜点是 75–85。低于 60 开始出现块状伪影；高于 90 体积暴涨但肉眼看不出提升。
PNG：精准与透明
PNG 是无损格式：每个像素在压缩后完全一致。这使它成为截图、UI 元素、像素画、图表以及任何需要文字绝对锐利的图像的唯一合理选择。
优点：
- 完美保真——永远没有伪影
- 完整的 alpha 透明通道，边缘平滑
- 纯色图形的压缩效率极高
缺点：
- 存照片时文件巨大——常常是同画质 JPEG 的 5–10 倍
- 没有质量可调；要么无损，要么换格式
一个常见技巧是把少量颜色的图片导出为 8 位 “PNG-8”，体积会大幅缩小——但只适用于颜色数少的图像。
WebP：现代默认之选
Google 开发的 WebP 同时支持有损和无损压缩，还带 alpha 通道。同等视觉质量下，照片体积通常比 JPEG 小 25–35%，而且能把透明和高压缩率结合起来——这是 JPEG 做不到的。
优点：
- 照片比 JPEG 小 25–35%，图形也比 PNG 更小
- 有损/无损模式都支持透明
- 所有现行浏览器都支持（Chrome、Firefox、Edge、Safari 14+）
缺点：
- 部分老旧桌面软件和 CMS 流程仍不支持
- 编码需要工具库（浏览器原生无法生成 WebP——Safari 甚至完全不能编码，所以浏览器端转换器要回退到 WebAssembly 编码器）
AVIF：新一代选择
相近画质下 AVIF 比 WebP 再小 20–30%，支持度也在快速增长。代价是编码成本：生成 AVIF 计算量很大，即使在快的电脑上每张也可能要几秒。适合用在带宽敏感的场景——首屏大图、高流量页面——并保留 WebP 或 JPEG 作为回退。
一张决策表
| 内容类型 | 首选 | 备选 |
|---|---|---|
| 网页照片 | WebP（质量 ~80） | JPEG（质量 ~80） |
| 带文字的截图 | PNG | WebP 无损 |
| 带透明的 Logo | PNG | WebP 有损+alpha |
| 图标集 | PNG 或 SVG | WebP |
| 邮件附件 | JPEG | PNG |
| 极致体积、现代受众 | AVIF | WebP |
关于格式转换
转换一次很便宜，转两次就亏了。务必从最好的原图开始转换——每一次有损重存都会叠加损伤。如果现在就要批量转换，试试我们的在线格式转换工具：PNG、JPEG、WebP、AVIF 自由互转，全程浏览器本地处理，文件不上传任何服务器。