图像格式全解析：了解 JPEG, PNG, WebP, GIF, SVG 和 AVIF 的应用与选择指南

上次更新时间: June 27, 2026

没有单一的最佳图片格式——每种格式都存在是因为它解决了不同的问题。JPEG 用于压缩照片，PNG 用于保留清晰的边缘和透明度，WebP 和 AVIF 可以进一步缩小照片，SVG 无像素地缩放，而 GIF 则用于动画。选择正确的格式是一个内容决策，而非个人偏好。本指南将介绍每种格式的作用，并提供来自同一源图片的实际测量文件大小。

快速答案：应该使用哪种格式？

根据图片内容和展示位置来匹配合适的格式：

有关详细的格式对比，请参阅 AVIF vs WebP vs JPEG comparison。

这些格式如何比较？

文件大小差异很大且一致。在一张 1400×933 的照片上测量：

PNG 的 853 KB 非常突出：无损存储一张照片的成本比 JPEG 高出约 8 倍，比 AVIF 高出 19 倍。这就是为什么即使 PNG 在技术上可以存储全页照片，但它不适合用于此目的。

JPEG — 照片工作马

JPEG (1992) 是一种用于照片的有损格式。它会丢弃人眼几乎看不到的高频细节，这就是为什么它可以大幅缩小照片，但也会模糊清晰的文字和细线。

• 最佳用途： 照片、渐变色、复杂的现实场景。
• 避免使用： 文字、UI 截图、锐利线条艺术、任何需要透明度（JPEG 没有 alpha channel）。
• 注意： 在质量低于 ~70 时，可能会出现明显的 8×8 方块伪影。

网页照片建议使用 q80–q85 的质量设置。查看 如何压缩 JPEG。

PNG — 清晰边缘和透明度

PNG 是无损的，支持完整的 alpha channel，因此它保留了每个像素和任何透明度。代价是文件大小：它不能很好地压缩照片。

• 最佳用途： 带有清晰边缘的图形、文本、徽标、UI 截图、透明图片。
• 避免使用： 全页照片（请改用 WebP/AVIF/JPEG——参见上表）。
• 注意： 照片文件会非常大。对于平面图形，可以使用 PNG-8 (≤256 colors) 来减小体积。

有关透明度的具体信息，请参阅 如何制作透明图片。

WebP — 现代网页默认选择

WebP (2010) 既支持有损又支持无损，支持 alpha，并且在匹配的质量下比 JPEG 小约 25–35%。现代浏览器支持率约为 98%。

• 最佳用途： 对字节大小敏感的网页照片和透明网页图片。
• 避免使用： 邮件和非常老旧的客户端（请使用 JPEG/PNG fallback）。
• 搭配使用： 在 <picture> 元素中使用 JPEG/PNG fallback。

AVIF — 最小的照片格式

AVIF (2019) 使用了 AV1 视频编解码器的帧内工具，比 WebP 又小了 20–30%。支持率约为 96% 且正在增长。

• 最佳用途： 对字节大小极度敏感的照片（英雄图片、LCP）。
• 避免使用： 当无法承受缓慢编码时，或用于非常老旧的浏览器（请使用 <picture> fallback）。
• 注意： 在质量过低 (<q40) 时，可能会出现细微纹理的涂抹感。

SVG — 可缩放的矢量图

SVG 是一种矢量格式：它存储的是形状，而不是像素，因此无论放大到多大尺寸都不会失真，并且对于简单的艺术作品来说文件非常小。

• 最佳用途： 徽标、图标、简单插画、任何需要缩放的元素。
• 避免使用： 照片（SVG 不能高效地表示照片）。
• 注意： 复杂度——详细的 SVG 文件可能会很大；如果需要，请将其栅格化。

GIF — 动画遗留格式

GIF 支持动画和 1-bit 透明度，但它仅限于 256 色，并且与现代动画格式相比，文件尺寸要大得多。

• 最佳用途： 没有现代应用——请替换为 animated WebP 或 AVIF。
• 避免使用： 任何对颜色要求高（256色限制）或对大小敏感的内容。
• 注意： 文件较大；一个 3 秒的 GIF 通常比相同片段的 MP4 更大。

在压力下如何选择？

使用这个简短的决策流程图：

1. 它是照片吗？→ WebP/AVIF（带 JPEG fallback）。
2. 它需要透明度吗？→ PNG 或 WebP (alpha)。
3. 它是一个可缩放的徽标/图标/插画吗？→ SVG。
4. 它是清晰文字/UI吗？→ PNG。
5. 它是一个动画吗？→ Animated WebP/AVIF，而不是 GIF。
6. 它是用于邮件吗？→ JPEG 或 PNG (不使用 WebP/AVIF)。

对于几乎所有网页照片来说，答案现在都是“WebP 或 AVIF 并带 JPEG fallback”。JPEG 之所以仍然存在，仅仅是因为通用兼容性，而不是因为它提供了最佳选择。

如何提供多种格式？

使用 <picture> 元素，这样每个浏览器都能获得它支持的最佳格式：

<picture>
  <source srcset="/img/photo.avif" type="image/avif">
  <source srcset="/img/photo.webp" type="image/webp">
  <img src="/img/photo.jpg" alt="Description" width="800" height="600" loading="lazy">
</picture>

浏览器会选择它支持的第一个类型并忽略其余的。始终保留一个带有 JPEG src 的真实 <img> 作为最终 fallback。请参阅 MDN 上的图片格式指南 以获取当前的按浏览器支持表。

常见错误

• 用 PNG 处理照片。 虽然可行，但文件大小比必需的要大 8–19 倍。
• 用 JPEG 处理文字或徽标。 压缩会模糊清晰的边缘。请使用 PNG 或 SVG。
• 提供单一格式且没有 fallback。 AVIF/WebP 需要为老客户端提供 JPEG fallback。
• 用 GIF 进行动画。 Animated WebP/AVIF 文件小得多，并且支持更多颜色。
• 忽略徽标的 SVG 格式。 栅格化的徽标在高 DPI 下会模糊；SVG 在任何尺寸下都保持清晰。

常见问题解答

我应该使用哪种图片格式？

照片用 JPEG，带有清晰边缘或透明度的图形用 PNG，作为现代网页默认选择用 WebP（比两者都小），对现代浏览器最小的照片用 AVIF，徽标和图标用 SVG。根据内容匹配格式。

WebP 比 JPEG 好吗？

对于网页传输来说，是的——在等效质量下，WebP 小 25% 到 35%，并且所有当前浏览器都支持。仅为非常老旧的浏览器保留 JPEG 作为 fallback。请查看 WebP 转换器指南。

何时使用 AVIF？

当您可以进行编码，并且您的受众主要使用现代浏览器时——AVIF 比 JPEG 小约 50%。权衡的是更慢的编码速度和老旧浏览器的兼容性问题。请通过 <picture> 元素使用 WebP fallback 来发布 AVIF。

PNG 支持透明度吗？

是的——PNG 有完整的 alpha channel，这也是它用于带有透明度的图形和徽标的原因。JPEG 不支持透明度。WebP 和 AVIF 也支持 alpha，并且在网页传输时尺寸更小。

哪种格式的照片最小？

AVIF（在现代浏览器上最小），然后是 WebP，最后是 JPEG。PNG 因为是无损的，所以照片文件最大。对于网页传输，WebP 是安全的默认选择；当您可以进行编码且您的受众使用现代浏览器时，使用 AVIF。

最小的图片格式是什么？

在现代浏览器上用于照片的是 AVIF（比 JPEG 小约 50%），然后是 WebP。PNG 因为是无损的，所以照片文件最大。对于带有透明度的图形，WebP 或 AVIF 比 PNG 更小。根据内容和受众浏览器的支持情况来匹配格式。

有损和无损有什么区别？

无损（PNG, lossless WebP）精确保留每个像素并可以完美还原——不会丢失任何质量。有损（JPEG, lossy WebP, AVIF）会丢弃人眼最不注意的细节以缩小文件，这种损失是永久性的。对于照片，有损格式更小；对于图形、文本和需要重新编辑的原稿，无损格式质量更高。根据内容选择。

带有透明度的图形最小的格式是什么？

WebP 或 AVIF，两者都支持 alpha channel，并且比 PNG 压缩得小得多。对于现代浏览器上的徽标和图标，WebP 或 AVIF 在保持透明度的同时，文件大小相比 PNG 大幅减小。请通过 <picture> 元素为缺乏支持的旧浏览器提供 PNG fallback。

图片来源

• 格式大小对比和条形图——由作者根据一个电商风格的照片（Pexels #16675632，摄影师为 Mikael Blomkvist）生成，展示了 PNG、JPEG、WebP 和 AVIF 在不同格式下的实际测量文件大小。