图片格式：选择困难症的终结

一个摄影师能用到多少种格式？

小李给了我一个”惊喜”。

他上传了 5 张作品，我打开 OSS 一看：

夜景01.JPG   - 8.7 MB   (索尼 A7R5 直出)
夜景02.ARW   - 52 MB    (RAW 格式，索尼原厂)
证件照.PNG   - 3.2 MB   (透明背景，带 Alpha 通道)
Logo.SVG     - 12 KB    (矢量图标)
表情包.GIF   - 2.1 MB   (256 色，帧动画)

五种格式，每种都不同。我的缩略图脚本处理到 .ARW 文件时直接崩溃了——PIL 不认识这个格式。

我意识到：在做技术决策之前，我需要先理解图片格式本身。

像素与色彩：图片的本质

在谈格式之前，先搞清楚图片到底是什么。

一张 6000×4000 的照片，未压缩是 68.7 MB。 但实际文件只有 8.7 MB——JPEG 压缩掉了 87% 的数据，你却几乎看不出区别。

这就是压缩的力量。

格式大比拼

我把常见的图片格式整理成了一张对比表：

JPEG：老当益壮

JPEG 是我遇到最多的格式。摄影师直出的照片几乎都是 JPEG。

JPEG 的最佳实践：质量设 80~85，大多数场景肉眼和原图无区别。

PNG：透明的代价

PNG 是无损压缩，适合线条图、Logo、需要透明通道的场景。

关键原则：照片绝不存 PNG。 但我的用户并不知道这个——他们截图保存的图片往往是 PNG，直接上传会浪费大量存储空间。

WebP：新一代标准

WebP 是 Google 推出的格式，同等质量下比 JPEG 小 30%~50%，还支持透明和动画。

WebP 的浏览器兼容性：截至 2024 年，全球支持率 97%。Safari 从 16.0 开始全面支持。剩下的 3% 可以用 <picture> 标签做降级：

AVIF：终极压缩

AVIF 基于 AV1 视频编码技术，压缩率比 WebP 还高 20%~30%。

但 AVIF 的编码速度很慢——比 WebP 慢 5~10 倍。如果在上传时同步生成，用户会等很久。需要用异步处理。

我的决策

基于以上分析，我为”光影”平台制定了格式策略：

核心原则：

• 原图永远保留——格式可以转换，但原始数据不可恢复
• 展示用图统一 WebP——兼容性和体积的最佳平衡
• AVIF 作为增强选项——支持的浏览器享受更小的体积

我的思考

思考 1

为什么不把所有图片都转成 AVIF，获得最大压缩率？

上传一张 8.7 MB 的 JPEG 原图：
- WebP 编码：~200ms
- AVIF 编码：~2000ms

如果用户上传后要等 2 秒才能看到处理结果，体验很差。
特别是批量上传时，20 张图要等 40 秒。

浏览器解码一张图片：
- JPEG：~5ms
- WebP：~8ms
- AVIF：~25ms

在低端手机上，AVIF 解码可能导致页面渲染变慢。

全球浏览器支持率（2024年）：
- JPEG：100%
- WebP：97%
- AVIF：92%（Safari 16.4+、Chrome 121+、Firefox 113+）

92% 意味着每 100 个用户有 8 个看不到图片。
虽然可以用 <picture> 降级，但需要同时存储 WebP 和 AVIF 两个版本，增加了存储成本。

思考 2

一张 PNG 截图 1.2 MB，转成 WebP 后只有 80 KB。如果我的平台每天有 1000 张 PNG 上传，不做转换一个月会浪费多少存储空间？