JPEG、PNG、WebP、AVIF：选择正确的图片格式

你导出一张图片。选项有JPEG、PNG、WebP、GIF、AVIF、SVG等等。

它们都产生图片。它们不可互换。

JPEG：照片标准

最适合： 照片、带渐变的复杂图像、任何有很多颜色的东西。

避免用于： 文字、logo、截图、任何有锐利边缘的东西。

JPEG使用有损压缩。它扔掉你在照片中可能不会注意到的数据。但它在锐利边缘上挣扎——文字看起来模糊，logo有伪影。

质量设置很重要。80-85%通常是最佳点。低于60%，压缩伪影变得明显。

PNG：锐利边缘和透明度

最适合： 截图、logo、带文字的图形、需要透明度的图像。

避免用于： 大照片（文件变得巨大）。

PNG使用无损压缩。每个像素都被精确保留。对锐利边缘很好，对复杂图像的文件大小很糟。

PNG-8（256色）vs PNG-24（数百万色）。尽可能使用8。

WebP：现代折衷

最适合： Web上的几乎所有东西。

避免用于： 当你需要与旧浏览器最大兼容性时。

WebP做有损和无损压缩，通常在相同质量下比JPEG或PNG小25-35%。

浏览器支持现在很好。使用WebP加上JPEG/PNG降级给古老浏览器。

AVIF：最新最小

最适合： 以良好质量获得最大压缩。

避免用于： 浏览器支持要求、编码速度担忧。

AVIF实现比WebP更好的压缩。但编码更慢，浏览器支持仍在增长。

如果你可以提前生成格式（静态站点），使用AVIF加降级。

GIF：移动图像、有限颜色

最适合： 简单动画、非常简单的图形。

避免用于： 照片（256色限制）、大动画（巨大的文件）。

GIF的动画支持让它活着。但最多256色意味着照片看起来糟糕。

对于动画，MP4或WebM视频通常更小且质量更好。

SVG：矢量图形

最适合： 图标、logo、插图、任何需要缩放的东西。

避免用于： 照片、复杂图像。

SVG不是位图格式。它是描述形状的XML。缩放到任何大小都没有质量损失。

对于图标和logo，SVG几乎总是正确选择。

快速决策指南

| 内容类型 | 格式 | |---------|------| | Web照片 | WebP（JPEG降级） | | 截图 | PNG | | Logo/图标 | SVG | | 简单动画 | GIF或动画WebP | | 复杂动画 | MP4/WebM视频 | | 最大质量存档 | PNG |

常见错误

所有照片用PNG。 10MB的PNG可能是500KB的JPEG且没有可见差异。

截图用JPEG。 文字变得模糊。使用PNG。

2026年不使用WebP。 浏览器支持很好。使用它。

反复保存JPEG。 每次保存都添加压缩伪影。保留源文件并导出一次。

---

格式选择是特定于图像的。照片是JPEG/WebP。图形是PNG/SVG。理解权衡并相应选择。