正在加载文章...
分享这篇文章
继续阅读
JPEG、PNG、GIF、WebP、AVIF 各自适合不同内容。选错格式会增加体积、降低清晰度，甚至影响 LCP。
选择格式时先看图片类型：照片、透明图形、图标、截图还是动画。
JPEG 由联合图像专家小组于 1992 年开发，至今仍适合摄影照片。
它是如何工作的： JPEG 依赖于有损压缩，主要使用离散余弦变换 (DCT)。它非常擅长通过丢弃人眼不易察觉的颜色信息（色度二次采样）来压缩复杂的渐变和摄影数据。
PNG 最初作为 GIF 的无专利替代品出现，支持 Alpha 透明通道。
技术解析： PNG 是一种无损格式（使用 DEFLATE 压缩协议）。这意味着每个像素都会被精确保留，没有任何数据丢失。
WebP 由 Google 开发，支持有损和无损压缩。
为什么必须关注 WebP： 根据 Google 的官方测试数据，WebP 无损图像比同等质量的 PNG 小 26%。WebP 有损图像比同等 JPEG 小 25-34%。
<picture> 标签中提供 Fallback。AV1 图像文件格式 (AVIF) 是这几年崛起的新星，它脱胎于开源且免版税的 AV1 视频编解码器。
AVIF 的优势： AVIF 在很多场景下比 WebP 更省体积，尤其适合高压缩比图片。它也支持 HDR 和广色域。
在接手一个新的 Web 项目时，请参考以下严格的最佳实践决策表：
| 内容类型 | 首选格式 | 备选格式 | 核心理由 |
|---|---|---|---|
| 摄影照片 | WebP / AVIF | JPEG | WebP 通常比 JPEG 更省带宽。图片处理服务能接受更慢编码时，可以考虑 AVIF。 |
| Logo 与 图标 | SVG | PNG | SVG 是分辨率无关的矢量数学。只有在矢量格式不可行时，才退而求其次选择无损 PNG 或无损 WebP。 |
| UI 组件 (带透明度) | WebP | PNG | 在处理 Alpha 透明通道时，WebP 的文件体积控制比 PNG 优秀得多。 |
| 短动画/动图 | WebM / MP4 | WebP / GIF | GIF 已经严重过时且效率低下。首选使用 HTML5 <video> 标签自动循环播放，次选 Animated WebP。 |
Web 项目应使用图片转换工具或图片 CDN 自动输出 WebP、AVIF 和必要 fallback。照片优先 WebP/AVIF，图标优先 SVG，透明 UI 图形可用 WebP 或 PNG，动画优先视频格式。