"我这张图存 PNG 还是 JPG？"——这个问题被前端、设计师、产品经理重复问了 30 年。表面看是格式问题，本质是对压缩算法、色彩通道、视觉感知三件事的理解。

这篇用 6000 字给你讲透。先讲原理，再实测，最后给出按场景的决策树。

一、三种格式的本质区别

PNG · 无损压缩 + 完整透明通道

全称：Portable Network Graphics
诞生：1996 年，因为 GIF 的 LZW 算法专利争议而被设计
压缩：DEFLATE（zlib 的核心，跟 ZIP / gzip 同根同源）
有损 / 无损：严格无损——每个像素 100% 还原
色彩通道：RGB + 完整 alpha（8 位透明度，256 级）

PNG 处理流程（简化）：

原始像素 (RGBA)
  ↓
按行扫描 + 像素过滤器（5 种：None / Sub / Up / Average / Paeth）
  ↓
DEFLATE 压缩（LZ77 + Huffman 编码）
  ↓
PNG 文件

滤波器干什么？把"原始像素值"变成"跟上一个像素的差值"。比如蓝天的连续像素 (120,180,255), (121,180,255), (122,181,255)… 用 Sub 滤波器变成 (120,180,255), (+1,0,0), (+1,+1,0)…——差值更小、更容易压缩。

PNG 的优势 = 无损 + 透明
PNG 的代价 = 体积大（典型照片比 JPEG 大 5-10 倍）

JPEG · 有损压缩 + 不支持透明

全称：Joint Photographic Experts Group
诞生：1992 年，专为照片设计
压缩：DCT（离散余弦变换）+ 量化 + Huffman 编码
有损 / 无损：有损——肉眼几乎看不出但数据真在丢
色彩通道：YCbCr（亮度 + 两个色度），没有 alpha

JPEG 处理流程：

RGB 像素
  ↓
转 YCbCr（人眼对亮度 Y 比对色度 Cb/Cr 敏感得多）
  ↓
色度下采样（Cb/Cr 通道分辨率降一半，肉眼几乎无感）
  ↓
分成 8×8 像素块
  ↓
对每个块做 DCT 变换（把空间域转频率域）
  ↓
量化（高频系数除以一个量化矩阵，丢精度）
  ↓
Huffman 编码

为什么 JPEG 这么省？因为人眼对高频细节（比如砖墙缝、毛发末梢）的敏感度远低于对低频形态（人脸大轮廓、天空颜色）的敏感度。JPEG 在量化阶段把高频系数粗暴四舍五入，砍掉肉眼不在乎的细节——这就是"视觉无损但数据有损"。

代价：

透明？不支持（这是 JPEG 唯一致命缺陷）
反复保存会累积损失（每次保存都做一次有损量化）
块状伪影：低质量 JPEG 在高频区域（文字、线条）会出现 8×8 像素方块的"马赛克感"

WebP · 现代综合方案

全称：Web Picture format
诞生：2010 年，Google 出品
压缩：VP8（视频编码格式，用于单帧）+ 自定义比特流
有损 / 无损：两种模式都支持（编码时选）
色彩通道：RGB + alpha（有损模式也支持透明，这是 JPEG 没有的）

WebP 处理流程（有损模式简化）：

RGB 像素
  ↓
预测编码（每个块预测自前面的块）
  ↓
DCT-like 变换 + 量化（跟 JPEG 类似但更先进）
  ↓
熵编码（算术编码，比 Huffman 更紧凑）

WebP 的优势：

同等画质下比 JPEG 小 25-35%（实测，下面有数据）
支持透明（JPEG 做不到的事）
既有损又无损（两种模式）
浏览器支持 95%+（2024 年起几乎所有现代浏览器）

WebP 的劣势：

编解码比 JPEG 慢（高质量编码慢 5-10 倍）
Photoshop 默认不支持（要装插件）
部分老设备 / 老软件不识别

二、体积实测（同一张图，相同视觉质量）

测试图：1920×1080 风景照（包含天空、植被、人像）

格式	模式	体积	vs JPEG
PNG	无损	4.2 MB	+1100%
PNG（palette 优化）	无损 + 调色板	2.8 MB	+700%
JPEG	质量 90	380 KB	基准
JPEG	质量 75	220 KB	-42%
WebP	无损	2.1 MB	+450%
WebP	质量 85	240 KB	-37%
WebP	质量 75	165 KB	-57%

关键发现：

同等视觉质量下：WebP（85）≈ JPEG（90）但小 37%
无损模式：WebP 比 PNG 小 50%
极致体积：WebP（75）能压到 JPEG（75）的 75% 大小

三、按场景的选择决策树

你的图有透明背景吗？
├── 是 → 必须 PNG 或 WebP（JPEG 出局）
│   ├── 文件大小敏感（网页 / App） → WebP 无损
│   └── 兼容性敏感（要发邮件 / 印刷） → PNG
│
└── 否（不透明）
    │
    需要严格无损吗？（图标 / 截图 / 文字图）
    ├── 是 → PNG（palette 优化）或 WebP 无损
    └── 否（照片类）
        │
        浏览器要兼容老设备吗？
        ├── 是 → JPEG（质量 85-90）
        └── 否 → WebP（质量 80-85）

四、典型场景推荐

1. 网页用图（最常见）

默认 WebP 质量 80-85。比 JPEG 小 30%，加载快，SEO 加分。 fallback：通过 <picture> 标签提供 JPEG 备份给老浏览器。

<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="...">
</picture>

2. 设计稿 / 多次编辑

用 PNG。无损保证多次保存不掉质。最终发布前再转 WebP / JPEG。

3. 透明 PNG（产品图、Logo、抠图结果）

小尺寸 + 简单图案 → PNG（palette 优化，比 WebP 更兼容）
大尺寸 + 照片级复杂度 → WebP 无损

4. 印刷 / 打印 / 高端摄影

PNG 或 TIFF。绝不用 JPEG（反复保存累积损失会被印刷放大）。

5. iPhone HEIC → 通用格式

要发微信 / 邮件 → JPEG 质量 90（兼容性第一）
要做网页素材 → WebP 质量 85

五、为什么 huanbjt.cn 默认输出 PNG？

我们的工具（去背景 / 换背景 / 抠图花刷）都默认输出 PNG，原因：

完整 alpha 通道：透明背景必须 PNG 或 WebP，PNG 兼容性更强
无损：用户拿去再做后续设计，不会累积损失
预期一致：用户搜索"抠图 PNG"是最常见心智模型
足够好：现在的 PNG palette 优化能把 1080p 透明图压到 300 KB 以内

如果你想要 WebP，可以用 Squoosh 或我们路线图里的「图片压缩」工具二次转换。

六、关于 EXIF / 元数据

JPEG 和 WebP 都支持 EXIF（相机型号、拍摄时间、GPS 位置等）
PNG 默认不带 EXIF（PNG 1.5 规范才支持 eXIf chunk，多数工具不读）

隐私警告：在网上分享照片前，记得清理 EXIF（尤其是 GPS）。huanbjt.cn 的所有工具处理后自动剥离 EXIF，所以拿我们输出的 PNG 直接发是安全的。

七、关于 8-bit / 16-bit 色深

色深	每通道颜色数	总颜色数	用途
8-bit	256	16.7 M	普通照片 / 网页
16-bit	65,536	281 T	高端摄影 / HDR 后期

JPEG 和 WebP 主流编码器只支持 8-bit。要保留 16-bit 色深做后期，必须 PNG 或 TIFF。

八、AVIF 和未来格式

AVIF（基于 AV1 视频编码）是 2020+ 出的新格式：

比 WebP 再小 20-30%
编解码比 WebP 还慢
浏览器支持 90%+（2024 年起）

短期内 WebP 仍是甜蜜点——编解码速度、工具支持、浏览器覆盖率都最均衡。AVIF 会在 5 年内成为新主流。

九、一句话总结

透明就 PNG，照片就 WebP，老兼容就 JPEG，极致体积就 AVIF。