图片格式详解：JPEG、PNG、WebP、AVIF 及更多
By Artur更新于 3 分钟阅读
你有没有想过，为什么有这么多图片格式？JPEG、PNG、WebP、AVIF、GIF、SVG......每种格式到底有什么区别？该怎么选？
别担心。这篇文章会用最简单的方式，帮你搞清楚每种图片格式的特点。读完之后，你就知道什么时候该用哪种格式了。
图片格式直接影响三件事：
选错格式，要么文件太大拖慢网站，要么画质太差影响体验。选对格式，能让你的网站又快又好看。
这跟图片压缩密切相关。不同格式用不同的压缩方式，效果差别很大。
JPEG 诞生于 1992 年，是目前互联网上使用最广泛的图片格式。全称是 Joint Photographic Experts Group（联合图像专家组）。
JPEG 使用有损压缩。简单说，它会丢掉一些人眼不太容易注意到的细节，来换取更小的文件体积。具体过程是这样的：
想深入了解有损和无损压缩的区别，可以看看这篇文章。
JPEG 最适合照片和色彩丰富的图片。如果你的图片是风景照、人像、产品图，JPEG 通常是不错的选择。不过现在 WebP 在大多数场景下表现更好。
PNG（Portable Network Graphics）诞生于 1996 年，最初是为了替代 GIF。它最大的特点是无损压缩和透明背景支持。
PNG 有两种主要变体：
还有 PNG-32，在 PNG-24 的基础上加了 alpha 通道，支持半透明效果。
需要透明背景的时候用 PNG。比如 Logo、图标、截图、包含文字的图片。但如果不需要透明背景，照片类图片用 JPEG 或 WebP 更好。
WebP 是 Google 在 2010 年推出的现代图片格式。它的目标很简单：比 JPEG 更小，比 PNG 更强。
数据说话：
这意味着，换用 WebP 就能让你的网站图片体积减少约三分之一。对核心网页指标的提升非常明显。
好消息是，WebP 的浏览器支持率已经超过 97%。所有主流浏览器都支持：Chrome、Firefox、Safari、Edge、Opera。你现在就可以放心使用。
几乎所有网页图片都可以用 WebP。它是目前性价比最高的格式。想了解更多，可以看看 WebP 为什么比 JPEG 更好。
AVIF（AV1 Image File Format）是基于 AV1 视频编码的图片格式，由开放媒体联盟（AOMedia）开发。它代表了图片压缩的最新技术。
AVIF 的压缩能力非常惊人：
想详细对比 AVIF 和 WebP，可以看看这篇分析。
截至目前，AVIF 的浏览器支持率约为 93%。Chrome、Firefox、Safari 都已支持。但比起 WebP 的 97%，还有一小段差距。
如果你追求极致的压缩率，而且不在意编码速度，AVIF 是最好的选择。特别适合对图片质量和文件大小都有极高要求的场景。
GIF（Graphics Interchange Format）诞生于 1987 年，比 JPEG 还老。它最大的特点是支持动画。
说实话，GIF 在技术上已经过时了。一个 5 秒的 GIF 动画可能有好几 MB。同样的内容，用 WebP 动画或短视频（MP4/WebM）体积要小得多。
几乎不建议用了。如果需要动画效果，优先考虑：
GIF 唯一的优势是兼容性极好，在任何地方都能显示。但在网站性能优化的角度，它不是好选择。
WebP文件比JPEG在相同质量下小25-35%。了解WebP压缩的工作原理、浏览器支持和转换方法。
AVIF和WebP详细对比：真实文件大小差异、浏览器支持情况、编码速度和画质表现。帮你选对适合自己项目的图片格式。
了解有损压缩和无损压缩的区别。找出哪种方法保留画质，哪种能最大程度缩小文件体积。
全面对比TinyPNG、Squoosh和CompressIMG。看看哪款图片压缩工具在批量处理、格式支持、画质控制、价格和API方面更胜一筹。
SVG（Scalable Vector Graphics）和前面的格式都不一样。它不是位图，而是矢量图。
SVG 用数学公式描述图形，而不是用像素。这意味着：
JPEG XL 曾经被寄予厚望。它的技术指标很优秀：
但是，Chrome 在 2023 年移除了对 JPEG XL 的支持。这基本上宣告了它在 Web 端的死亡。没有 Chrome 的支持，一个图片格式很难在网页上普及。
目前，JPEG XL 在摄影和专业图像处理领域仍有应用。但对于网站来说，不建议使用。
| 特性 | JPEG | PNG | WebP | AVIF | GIF | SVG |
|---|---|---|---|---|---|---|
| 压缩类型 | 有损 | 无损 | 有损/无损 | 有损/无损 | 无损 | 无损 |
| 透明背景 | 不支持 | 支持 | 支持 | 支持 | 部分支持 | 支持 |
| 动画 | 不支持 | 不支持 | 支持 | 支持 | 支持 | 支持 |
| 浏览器支持 | 100% | 100% | 97%+ | 93%+ | 100% | 100% |
| 最适合 | 照片 | 截图/透明图 | 通用 | 极致压缩 | 简单动画 | 图标/矢量图 |
| 诞生年份 | 1992 | 1996 | 2010 | 2019 | 1987 | 2001 |
不确定该用哪种格式？按这个决策流程走：
第一步：是矢量图吗？ 如果是 Logo、图标、简单图形，用 SVG。
第二步：需要动画吗？ 如果需要，用 WebP 动画或短视频。不要用 GIF。
第三步：需要透明背景吗？ 如果需要，用 WebP（有损）或 PNG（无损）。
第四步：是照片类图片吗？
第五步：是截图或包含文字的图片吗？ 用 PNG（需要无损）或 WebP（可以接受轻微有损）。
简单总结：大多数情况下，WebP 是最安全的选择。如果你想更进一步，可以用 AVIF 配合 WebP 作为回退方案。
图片格式的发展趋势很明确：
不管格式怎么变，核心原则不变：在保证画质的前提下，尽量减小文件体积。
选对格式只是第一步。你还需要一个好用的压缩工具来进一步减小文件大小。
CompressIMG 支持 JPEG、PNG、WebP、AVIF 等主流格式的压缩。上传图片，选择目标格式和质量，几秒钟就能拿到优化后的图片。完全免费，无需注册。
试试看，你的网站加载速度会有明显提升。
CompressIMG
无损压缩图片。免费、快速，直接在浏览器中完成。