JPG、PNG、WebP、SVG：您应该使用哪种图像格式？
选择错误的图像格式，您要么会因为巨大的文件而使页面膨胀，要么最终会出现模糊、像素化的图形。选择正确的网站，您的网站加载速度更快，看起来更清晰——而且是免费的。以下是您将实际使用的四种格式的简单英语细分，以及何时使用每种格式。
JPG (JPEG)：照片
JPG 使用“有损”压缩——它会丢弃肉眼几乎察觉不到的细节，以实现小文件。这使得它非常适合照片以及具有大量颜色和渐变的复杂图像。权衡：它不支持透明度，并且重复编辑/重新保存会降低质量。避免将其用于文本、徽标或锐边，因为它会模糊成可见的人工制品。
PNG：图形、徽标和透明度
PNG 使用“无损”压缩，因此它可以保持每个像素精确并支持透明度。它是徽标、图标、屏幕截图以及任何具有清晰边缘或文本的图像的正确选择。缺点是文件大小 — PNG 照片可能比 JPG 等效文件大几倍，因此不要将其用于照片。
WebP：现代多面手
WebP 由 Google 开发，提供有损和无损压缩以及透明度 - 本质上是 JPG 和 PNG 中最好的一种格式，但尺寸较小。 Google 的 WebP 文档报告比同类 JPG 和 PNG 节省 25–35%。每个现代浏览器都支持它，因此对于大多数网站来说，它应该是您的默认浏览器。使用JPG 到 WebP 或PNG 到 WebP 转换现有图像 - 如果您需要后备，WebP 到 JPG 可以反转它。
SVG：徽标、图标和任何可缩放的内容
SVG 有着根本的不同：它存储矢量指令（直线、曲线、形状）作为代码，而不是像素。这意味着它可以缩放到任何尺寸——从图标到广告牌——质量损失为零，而且对于简单的图形来说文件很小。将其用于徽标、图标和插图。它不适合拍照。使用我们的 SVG 优化器 修剪导出的 SVG 中的膨胀。如果您想深入了解，MDN 图像文件类型指南是权威参考。
快速决策指南
- 网页上的照片？WebP（或 JPG 作为后备）。
- 徽标或图标？ SVG（如果您有矢量）；否则为PNG。
- 需要透明度？WebP、PNG 或 SVG — 切勿使用 JPG。
- 在兼容性很重要的情况下打印或下载？JPG 或 PNG。
不要忘记优化
格式只是成功的一半——大小同样重要。无论您选择什么，都可以使用图像调整器将其调整为实际显示的尺寸，并使用图像压缩器对其进行压缩。有关完整的工作流程，请参阅我们的图像优化指南。
新的竞争者 AVIF 怎么样？
WebP 有一个新的竞争对手：AVIF。在相同质量下，它的压缩速度通常比 WebP 还要小，这使其对性能关键型网站具有吸引力。尽管现在浏览器覆盖范围很广，但其代价是普遍支持稍差，编码速度较慢。一种常见的现代方法是为 AVIF 提供 WebP 后备和 JPG/PNG 作为最终的安全网 - 浏览器选择它支持的最佳格式。对于当今的大多数网站来说，WebP 仍然是务实的默认设置，而 AVIF 是值得采取的下一步。
有损与无损：核心权衡
格式名称下面有一个决定：有损或无损。 有损（JPG 和有损模式下的 WebP/AVIF）会丢弃肉眼几乎无法注意到的数据，从而获得微小的文件 - 非常适合照片，但不适合清晰的文本。 无损（无损模式下的 PNG、SVG 和 WebP）保持每个像素精确，这对于徽标、屏幕截图和边缘清晰的图形至关重要。将此选择与您的图像类型相匹配比特定的格式标签更重要。
不要重复重新保存有损图像
一个实用的警告：每次编辑并重新保存 JPG（或任何有损格式）时，它都会损失更多的质量 - “生成损失”，就像复印复印件一样。始终保留原件，对其进行编辑，然后导出新副本，而不是重复保存同一张 JPG。对于您经常编辑的图像，请以无损格式工作，并仅在最后一步导出为有损格式。然后使用我们的图像压缩器进行优化。
底线
用于照片的 WebP、用于徽标和图标的 SVG、用于需要无损透明度的 PNG、用于最大兼容性的 JPG。将格式与内容相匹配，您将获得更清晰的图像和更快的页面，而无需花费任何钱。
