JPEG、GIF、PNG 或 SVG——你应该使用哪一种？

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

前端开发人员有很多需要关注的事情，图像管理和优化就是其中之一。为什么呢？据说图像占网页内容的60%左右，所以作为前端开发人员，你很可能需要处理图像。

在学习响应式图片课程之前，我根本不在乎图片格式。我的意思是，随便什么格式都行……哈哈 :) 然而，这门课程彻底改变了我对图片的看法，让我明白了图片如何影响网页，以及为什么始终使用正确的图片格式至关重要。这是因为作为前端开发人员，你不仅要关注图片在网页上的显示效果，还要在保证质量的前提下尽可能减小文件大小，确保图片具有响应式设计，并实现快速加载。

由于图像文件格式多种多样，我们可能会在每个环节遇到一个关键问题：我应该使用哪种图像格式？JPEG、PNG、SVG 还是 GIF？在回答这个问题之前，让我们先来了解一下每种文件格式。

JPEG

JPEG 或 JPG 是联合图像专家组 (Joint Photographic Expert Groups) 的缩写。这是一种非常常见的图像格式。它是一种 24 位图像格式，这意味着 JPEG 图像可以包含并显示数百万种颜色——精确地说是 1680 万种颜色。这使得它们非常适合照片和包含超过 256 种颜色的图像。

JPEG 以有损格式存储数据。因此，压缩时会丢失一些图像细节以减小文件大小。这使我们能够自由选择 JPEG 文件的压缩程度。所以它通常非常适合生成较小的文件。但要注意压缩，以免压缩后的图像与原始图像差异过大。

JPEG文件格式并不适合包含大量线条和文字的图像，因为压缩后或放大时数据丢失会导致图像出现锯齿状边缘。此外，它也不支持透明度。

GIF

图形交换格式 (GIF) 是一种存在已久的图像格式。与 JPEG 不同，GIF 仅支持 256 种颜色。虽然这听起来似乎很多，但实际上却非常少，因为典型的照片通常包含数千种色调。当照片转换为 GIF 格式时，这些色调会丢失，因此，GIF 并不适合处理色彩丰富的照片或图像。

GIF格式适用于像素差异较小的图形，例如徽标、图标和旗帜。它非常适合简单的动画。
与JPEG不同，GIF支持无损压缩，即压缩过程中不会丢失任何数据。

GIF 的一个主要优势在于它支持透明度。这意味着您可以将 GIF 图像叠加在彩色背景或照片上，而不会看到任何边框。但是，GIF 的透明度并非选择性的。如果您将某个颜色设置为透明，则该颜色在整幅图像中都会变为透明。多年来，GIF 是唯一支持透明度的图像格式，但现在 PNG 和 SVG 也支持透明度了。

PNG

PNG（便携式网络图形）是一种专为网络设计的图像格式，它融合了JPEG和GIF的优点。PNG有两种格式：PNG-8和PNG-24。这两种格式的主要区别在于它们支持的颜色数量。PNG-8最多可以显示256种颜色，而PNG-24格式可以显示数百万种颜色，非常适合用于照片。

与JPEG不同，它是一种无损文件格式。因此，它在压缩后能够保留图像的质量和细节。但这会导致文件体积较大。所以，只有当图像质量比文件大小更重要时，才应该使用这种格式。

PNG 图像比 GIF 更能支持透明度。它还支持图像亮度控制、色彩校正和二维隔行扫描（一种逐行显示方法）。

PNG 图片也支持嵌入文本，可以包含对图片内容的简短描述。这有助于搜索引擎根据嵌入文本的内容搜索图片。

PNG 图片无法制作动画。并非所有浏览器都支持 PNG 格式。

SVG

SVG（可缩放矢量图形）是一种矢量格式。由于其强大的功能，SVG 正变得越来越流行。SVG 使用基于 XML 的标记语言编写，就像 HTML 用于插图一样，它与我们之前讨论过的其他图像格式截然不同。

SVG 格式具有极佳的可缩放性。它们是矢量图形，由数学定义的形状和曲线等构成，因此不受像素限制，这与其他依赖像素的格式截然不同。无论屏幕尺寸和放大倍数如何，SVG 的显示效果都保持一致。这使得它们非常适合响应式设计。

SVG 可以使用 CSS 和 JavaScript 进行修改。因此，如果您需要可以随时编辑的图像，SVG 是一个绝佳的选择。它们还可以使用 CSS 动画和 JavaScript 实现动画效果。

SVG 文件通常体积较小。SVG 文件的大小取决于其复杂程度，而非图像本身的大小。因此，对于形状较少、线条简洁的简单图像（例如徽标），SVG 文件的大小通常比任何光栅图像格式（JPEG、PNG）都要小。但对于复杂的图像或图形，SVG 文件可能体积较大，并非最佳选择。

SVG 最适合显示徽标、图标、地图、旗帜、图表以及其他由线条和形状组成的图形。但对于包含大量线条和形状的复杂图像，例如照片，它可能并非理想之选。虽然 SVG 在网页上看起来很漂亮，但它并不是我们可以用来在网络上保存和上传图像的格式。

现在我们已经讨论了所有这些图像格式，让我们回到最初的问题：我应该使用哪种图像格式？如果您仔细阅读以上内容，就会发现没有一种图像格式能够永远胜任。没有所谓的最佳图像格式。您选择的图像格式取决于具体情况和您的实际需求。是照片吗？您需要小文件大小吗？您需要它在所有屏幕上都能呈现良好的效果吗？您需要动画吗？您希望能够对其进行修改吗？等等等等。

为了帮助您做出正确的选择，这里简要概述一下每种图像格式的关键信息。我相信这能对您的选择有所帮助。

JPEG

• 可显示约1680万种颜色
• 有损压缩
• 无法制作动画
• 非常适合拍摄静态图像和照片

GIF

• 可显示256种颜色
• 无损压缩
• 支持透明度
• 非常适合简单的动画制作
• 适用于纯色图形和无渐变图形。

PNG

• PNG-8：可显示256种颜色
• PNG-24：可显示数百万种颜色
• 无损压缩
• 透明度优于 GIF
• 无法制作动画
• 适用于图标；可在没有 SVG 格式时使用。

SVG

• 可扩展性强，非常适合响应式设计
• 可以使用 CSS 和 JavaScript 进行修改
• 文件大小较小；具体取决于图像的复杂程度。
• 可以制作动画
• 非常适合用于制作徽标、图标、地图、旗帜、图表等。
• 不太适合拍照

额外的

嘿，还有一种图像格式正在迅速流行起来，那就是WebP格式。你可以在这里了解更多信息。

想了解更多关于我们主题的信息？以下是我觉得有用的一些文章：
PNG、GIF 还是 JPEG？哪种图片格式最适合电子邮件？

GIF、PNG、JPG 或 SVG，应该使用哪一种？

为什么要使用SVG？

关于SVG你需要知道的一切

有任何疑问或补充吗？请留言。

感谢阅读。:)