3、图片格式选择：JPEG、PNG、WebP、AVIF的适用场景与压缩权衡
图片格式选不对，页面切换再优化也是白搭。我见过太多团队，优化了半天加载速度，结果一张 PNG 大图直接把内存撑爆。今天咱们就把 JPEG、PNG、WebP、AVIF 这四种格式聊透。
核心原则：没有最好的格式，只有最合适的场景。选格式就是在文件体积、显示质量、解码速度和兼容性之间做权衡。
3.1 JPEG：老牌选手，照片首选
JPEG 这格式，说白了就是为照片而生的。它用有损压缩，能把一张几 MB 的照片压到几百 KB，肉眼还看不太出来区别。我在做电商项目时，商品主图清一色用的 JPEG，加载速度直接提了 40%。
| 特性 | 说明 |
|---|---|
| 压缩类型 | 有损压缩，可调节质量参数（0-100） |
| 色彩深度 | 24位真彩色，1600万色 |
| 透明度 | 不支持 |
| 适用场景 | 照片、渐变背景、复杂色彩图片 |
| 浏览器兼容 | 所有浏览器，100% |
我的经验：JPEG 质量参数设 80-85 是最佳平衡点。低于 70 会出现明显的块状伪影，高于 95 文件体积翻倍但画质提升微乎其微。我曾经为了省 10KB 把质量降到 60，结果被设计师追着骂了三天。
3.2 PNG：透明图标的守护神
PNG 分两种：PNG-8 和 PNG-24。PNG-8 最多 256 色，适合图标、Logo；PNG-24 支持真彩色和 Alpha 通道透明度。你想想看，一个带透明背景的 Logo，不用 PNG 还能用啥？
但 PNG 有个致命伤——文件体积大。一张 1920×1080 的 PNG 截图，轻松上 5MB。我在做后台管理系统时，用户上传的截图全是 PNG，首屏加载直接崩了。后来强制转 WebP，体积降了 70%。
| 特性 | PNG-8 | PNG-24 |
|---|---|---|
| 颜色数 | 最多256色 | 1600万色 |
| 压缩 | 无损 | 无损 |
| 透明度 | 支持（1位） | 支持（8位Alpha） |
| 文件大小 | 较小 | 较大 |
| 适用 | 图标、小UI元素 | 需要透明背景的高质量图片 |
避坑指南：千万不要用 PNG 存照片！我曾经接手过一个项目，所有商品图都是 PNG，单张 3-5MB，页面加载慢到用户直接关网页。换成 JPEG 后，体积降到 200KB，加载速度提升了 15 倍。
3.3 WebP：Google 的野心之作
WebP 是 Google 推出的格式，同时支持有损和无损压缩，还支持透明度。说白了，它想一统天下。实际效果也确实不错——同等画质下，WebP 比 JPEG 小 25-35%，比 PNG 小 50% 以上。
我记得在做一个移动端 H5 项目时，图片资源占了总流量的 80%。全部转成 WebP 后，流量直接砍半，用户满意度飙升。不过要注意，Safari 直到 iOS 14 才支持 WebP，之前得做降级处理。
| 对比项 | WebP有损 | WebP无损 |
|---|---|---|
| 压缩率 | 比JPEG小25-35% | 比PNG小50% |
| 透明度 | 支持 | 支持 |
| 解码速度 | 比JPEG慢10-20% | 比PNG慢20-30% |
| 兼容性 | Chrome/Edge/Firefox/Safari 14+ | 同上 |
实用建议：WebP 有损模式适合照片，质量参数设 75-85；无损模式适合需要透明度的图标。但解码速度比 JPEG 慢，CPU 性能差的设备上会有卡顿感。
3.4 AVIF：下一代格式，但生态未成熟
AVIF 是基于 AV1 视频编码的图片格式，压缩率比 WebP 还高 20-30%。我测试过一张 4K 照片：JPEG 2.3MB，WebP 1.5MB，AVIF 只有 900KB。画质几乎一样。
但 AVIF 有两个硬伤：一是解码速度慢，低端手机上解码一张 AVIF 要 100-200ms；二是兼容性差，Safari 16 才支持，IE 和旧版 Chrome 直接不认。目前只适合做渐进增强。
| 格式 | 文件大小（相对JPEG） | 解码速度 | 兼容性 |
|---|---|---|---|
| JPEG | 基准（100%） | 最快 | 100% |
| WebP | 65-75% | 中等 | 90%+ |
| AVIF | 45-55% | 较慢 | 60%+ |
注意：AVIF 目前不适合做主格式。我建议把它作为 <picture> 元素的补充选项，浏览器支持就用，不支持就降级到 WebP 或 JPEG。
3.5 有损 vs 无损：怎么选？
这个选择题其实不难。有损压缩会丢掉一些图像信息，但文件小；无损压缩保留全部信息，但文件大。关键看你的图片用在哪。
- 照片、背景图、商品图 → 有损压缩。人眼对高频细节不敏感，丢掉一点看不出来。
- 图标、Logo、截图、UI元素 → 无损压缩。这些图有硬边缘和纯色区域，有损压缩会产生锯齿和色块。
- 医疗影像、设计稿、印刷素材 → 必须无损。丢一个像素都可能出问题。
我的习惯：在项目中我会用 <picture> 标签做多格式降级。先试 AVIF，不行就 WebP，再不行就 JPEG/PNG。这样既享受了新格式的体积优势，又保证了兼容性。
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="示例图片">
</picture>3.6 实战选择策略
说了这么多，到底怎么选？我总结了一个简单粗暴的规则：
- 照片类内容 → WebP（有损），降级 JPEG
- 带透明背景的图标/Logo → WebP（无损），降级 PNG-24
- 纯色图标/小UI元素 → 优先考虑 SVG 或 CSS，其次 PNG-8
- 截图/文档扫描件 → PNG-24 或 WebP 无损
- 需要极致压缩的场景 → AVIF，做好降级
最后说一句：格式选择不是一劳永逸的事。浏览器在进化，新格式在出现，你的选择策略也要跟着更新。但核心原则不变——在体积、质量、兼容性之间找到最适合你项目的平衡点。