图片格式详解：JPEG、PNG、GIF、WebP、AVIF、SVG 的对比与选择
做前端这么多年，我见过太多因为图片格式选错导致的性能灾难。有一次，一个活动页面的首屏加载时间硬生生被几张 PNG 大图拖到了 8 秒——用户早跑了。所以今天咱们就把这六种主流格式掰开揉碎，讲清楚它们各自适合什么场景。
先看一张总览图
下面这张 SVG 图，是我自己梳理的格式选择决策树。你可以把它当作本章的导航地图，后面每个小节都会对应到图上的某个分支。
JPEG：照片的默认选择
JPEG 是历史最久、兼容性最好的有损格式。它用离散余弦变换把图像里的高频细节丢掉，换来极小的文件体积。
核心特点
- 有损压缩：压缩率可以调到 10:1 甚至更高，但画质会肉眼可见地下降
- 不支持透明：背景永远是纯色填充
- 不支持动画：静态图片专用
- 色彩深度：24 位真彩色，1600 万色，适合照片
我的习惯：产品详情页的轮播图，我一般用 JPEG 质量 75-85。低于 70 会出现明显的块状伪影，高于 90 体积翻倍但肉眼几乎看不出区别。
PNG：透明与无损的代价
PNG 是无损压缩的代表。它用 DEFLATE 算法压缩，不会丢掉任何像素信息。但代价就是——文件大。
核心特点
- 无损压缩：放大 100 倍也不失真
- 支持 Alpha 透明：半透明、渐变透明都支持
- 色彩模式：PNG-8（256 色）和 PNG-24（1600 万色）
- 不支持动画
我曾经踩过的坑：有一次设计师给了张 4000×3000 的 PNG 截图，足足 12MB。我直接扔到页面上，结果移动端加载花了 15 秒。后来用 TinyPNG 压缩到 2MB，再配合懒加载才解决。记住：PNG 适合小尺寸图标或需要透明通道的 UI 元素，千万别拿它存大照片。
GIF：老古董但还能用
GIF 诞生于 1987 年，只支持 256 色。但它有一个杀手锏——动画。而且兼容性极好，所有浏览器都认识它。
核心特点
- 256 色限制：颜色过渡会有明显的色带
- 支持简单动画：逐帧播放，帧率可控
- 支持透明：但只有 1 位透明（要么全透，要么不透），没有半透明
- 文件偏大：同等画质下，比视频格式大得多
我的建议：现在做动画表情或短循环动图，我优先用 WebP 或 APNG。GIF 只保留在需要兼容老旧系统的时候。你想想看，一个 5 秒的 GIF 动图动辄 3-5MB，换成 WebP 可能只有 500KB。
WebP：Google 的野心之作
WebP 是 Google 在 2010 年推出的格式。它同时支持有损和无损压缩，还支持透明和动画。说白了，它想一统天下。
核心特点
- 有损模式：比 JPEG 小 25%-35%，画质相当
- 无损模式：比 PNG 小 26%，支持透明
- 支持动画：比 GIF 小得多，帧率更高
- 兼容性：Chrome、Edge、Firefox、Safari 14+ 都支持
实际效果：我在一个电商项目中，把首页的 JPEG 轮播图全部转成 WebP 有损模式（质量 80），总体积从 2.3MB 降到了 1.4MB，首屏加载时间缩短了 0.8 秒。而且用户完全看不出画质差异。
AVIF：新一代压缩之王
AVIF 基于 AV1 视频编码，压缩率比 WebP 还高 20%-30%。它是目前压缩效率最高的图片格式。
核心特点
- 极致压缩：同等画质下，比 JPEG 小 50%，比 WebP 小 20%
- 支持 HDR：高动态范围，色彩更丰富
- 支持透明和动画
- 兼容性：Chrome 85+、Firefox 93+，但 Safari 支持较晚（16.0+）
注意：AVIF 编码速度较慢，服务端转换时会有 CPU 开销。我一般只在图片 CDN 开启自动转码的场景下使用，或者提前在构建阶段批量转换。
SVG：矢量世界的王者
SVG 不是位图，它是用 XML 描述的矢量图形。放大缩小都不会失真，而且文件通常很小。
核心特点
- 矢量缩放：任意尺寸都清晰
- 可编程：可以用 CSS 和 JavaScript 控制颜色、动画
- 文件极小：简单的图标可能只有几百字节
- 不适合复杂照片：照片转 SVG 会变成巨大的路径数据，得不偿失
我的习惯：所有图标、Logo、简单插画，我都用 SVG。而且我会把多个 SVG 合并成 SVG Sprite，减少 HTTP 请求。你想想看，一个 20KB 的 SVG Sprite 能装下 50 个图标，换成 PNG 图标集至少 200KB。
六格式对比表
| 格式 | 压缩类型 | 透明 | 动画 | 色彩深度 | 文件大小 | 最佳场景 |
|---|---|---|---|---|---|---|
| JPEG | 有损 | ❌ | ❌ | 24 位 | 中等 | 照片、复杂渐变 |
| PNG | 无损 | ✅ | ❌ | 8/24 位 | 较大 | 图标、UI 元素、截图 |
| GIF | 无损 | 部分 | ✅ | 8 位 | 较大 | 简单动画、兼容旧系统 |
| WebP | 有损/无损 | ✅ | ✅ | 24 位 | 小 | Web 通用替代 |
| AVIF | 有损/无损 | ✅ | ✅ | 24 位+HDR | 极小 | 高压缩需求、HDR 内容 |
| SVG | 无损（矢量） | ✅ | ✅ | 无限 | 极小 | 图标、Logo、插画 |
实际选择策略
说了这么多，到底怎么选？我总结了一个简单的决策流程：
- 是矢量图形吗？（图标、Logo、简单插画）→ 用 SVG
- 需要动画吗？→ 优先 WebP 或 AVIF，兼容性要求高才用 GIF
- 需要透明通道吗？→ 用 PNG 或 WebP（无损模式）
- 是照片或复杂图像吗？→ 用 WebP（有损）或 AVIF，兼容性兜底用 JPEG
- 对文件大小极度敏感？→ 用 AVIF，但注意编码开销
我的推荐组合：目前生产环境最稳妥的方案是「WebP 为主 + JPEG/PNG 兜底」。用 <picture> 标签做格式降级，浏览器会自动选择它支持的最优格式。下一章我会详细讲 <picture> 的用法，这里先记住这个原则。
嗯，格式对比就到这里。每种格式都有自己的脾气，选对了事半功倍，选错了用户买单。记住：没有最好的格式，只有最合适的场景。