译者：[lunasun]
> 链接：[http://www.zcfy.cc/article/3211](http://www.zcfy.cc/article/3211)
> 原文：[https://cheesecakelabs.com/blog/jpg-png-svg-web-beginners-guide/]
图像是当今网络不可或缺的一部分。 但情况并非总是如此。 直到 1993 年，Mosaic 浏览器才将图像添加到网页内容中。 GIF 和 JPEG 等一些图像格式当时已经存在，而 PNG 和 SVG 直到 90 年代才出现。 图像可以以多种方式使用，例如：显示图片、品牌、插图、图表和许多其他内容。
由于图像格式多种多样，应用场景复杂，如何选择正确的图像格式变得越来越困难。 徽标应该是 SVG 还是 PNG？ 对于屏幕截图，我应该选择 JPEG 还是 PNG？ 在不生成过大文件的情况下，文件的最佳质量是多少？ 了解每种图像格式的工作原理及其各自的优点和缺点可以帮助回答这些问题。
在过去的几年里，大量数字设计和后端开发方面的研究和测试工具帮助我们解决了这些问题。 在本文中，我将展示每种格式的工作原理、各自的优点，以及如何压缩和保存它们以供 Web 使用。
JPEG
JEPG由联合摄影专家组于1992年创建，并以其创建者的名字命名。 JPEG 是一种有损光栅图像格式，这意味着每次 JPEG 被压缩和保存时，一些信息都会不可逆地丢失。
JPEG 利用人类感知的缺陷（对色温比颜色更敏感）来使用压缩算法，该算法会丢弃我们不太擅长捕获的信息，因此是一种“有损格式”。 压缩设置将决定最终保存文件的大小和质量。 JPEG压缩技术远不止这些，如果你想了解更多，可以看看David Austin的这篇文章。
JPEG 的用途
由于 JPEG 适合亮度和色调压缩，因此它适用于照片以及其他逼真或阴影图像，例如油画和 3D 渲染。 这就是为什么它多年来一直是存储图片的最流行的格式。 出于同样的原因，JPEG 也不适合矢量图像，例如徽标、几何图形、屏幕截图等。
照片以及书法等复杂或阴影图像是使用 JPEG 的好例子。
压缩JPEG
作为一种有损格式，JPEG 文件的压缩率与最终图像质量成正比。 在 Photoshop 等工具中保存 JPEG 时，您会看到从 0 到 100 的质量设置。Photoshop 设置一些图像质量范围：
最佳 100% (61 KB)，极高 80% (29 KB)。
60% 高 (16 KB)，80% 中 (7 KB)。
低 100% (6 KB)，最低 0% (3 KB)。
建议网页使用 50% 到 60% 质量之间的 JPEG，因为它结合了良好的图像质量和较小的文件大小。 删除元数据还可以减小 JPEG 文件大小。 还有一些在线工具（如 TinyJPG）和桌面应用程序（如 ImageOptim (Mac) 和 RIOT (Windows)）可用于压缩图像。 在 Photoshop 中，可以通过在“导出”中选择“元数据：无”或“保存为 Web（旧版）”来完成压缩。 模糊全部或部分图像也会导致文件大小变小，如果您不相信我，可以在这里阅读。 请注意，由于 JPEG 是一种有损格式，即使以 100% 质量保存同一文件，随着时间的推移，也会导致图像质量下降，因为压缩算法会在同一图像上反复应用。 但此更改可能不会显示为文件大小的更改。
巴布亚新几内亚
便携式网络图形也是一种自 1995 年以来出现的光栅图像格式。它与 JPEG 不同，因为它是一种无损格式，并且是迄今为止 Web 上最常见的无损格式。 这意味着，由于其压缩算法，保存和压缩文件时不会丢失任何信息。
PNG 有许多很酷的功能，例如：
有关 PNG 的更多功能、历史和技术信息的完整列表，请参阅 libpng 的页面。
PNG 的用途
PNG特别适合腰围图、LOGO、图标和颜色很少的图像。 具有复杂颜色的照片和图像将生成巨大的 PNG 格式文件。 PNG 的另一个优点是它支持透明背景。 在这些情况下，即使是复杂的图像仍然需要使用PNG，因为JPEG很难实现图像透明度。
PNG 非常适合腰围艺术品、徽标和图标。 （漫画作者：xkcd）
压缩PNG
由于PNG中的压缩算法是无损的，因此您可以有选择地减少其颜色，从而通过外部工具减小图像大小。 Pngquant 是一个很棒的工具，可以在保持透明度的同时减小文件大小。 请注意，此过程会创建一个 8 位文件，最多可以有 256 种颜色。 看起来可能不多，但是用这么多颜色就足以得到好的效果了。
左侧为 24 位图像 (149 KB)，右侧为 8 位 256 色图像 (54 KB) — 缩小了 63.7%
对于大多数 PNG 使用场景（线条图、图形、图标），256 色就足够了。 因此，通过减少调色板中的颜色数量可以进一步减小文件大小。 使用 GUI 工具是一个不错的选择，例如 Pngyu 或 ImageAlpha，它们允许您预览生成的文件。 以下反例展示了如何在不明显影响质量的情况下将调色板减少到 32 种颜色。 在类似的反例中，图像很难自动压缩 - 因为需要不断的预览和测试才能获得最佳结果 - 同时使用最少的颜色并产生最小的文件大小。 和JPEG一样，也有在线压缩PNG的工具，例如：TinyPNG。
在此示例中，徽标从原始 24 位 PNG (10 KB) 缩减为 8 位 32 色版本（2 KB，缩减了 80%），而没有丢失任何显着的细节。
那么，GIF 怎么样？
图形交换格式也是一种位图格式，早于本文提到的其他格式。 它由 Steve Wilhite 于 1989 年创建css3亮度，在 PNG 创建之前是最流行的 8 位图像格式。 GIF 具有与 PNG 相似的特性，但也有一些缺点：
GIF 在动漫中很出名并被广泛使用。 然而，现在动画也可以通过其他文件大小较小的方法来完成：例如使用 SVG 和 Javascript、PNG 序列帧或视频。 因此，除非有非常特殊的原因需要使用 GIF，否则我建议您使用 PNG 或 SVG。
静止无功发生器
可缩放矢量图形（Scalable Vector Graphics）与上面提到的光栅格式不同。 顾名思义，它是一种矢量格式。 这意味着它不是基于像素来存储数据，而是通过记录坐标来存储图形信息。 SVG 使用基于 XML 的语义标签结构，有点像 HTML。 由于 DOM 结构，您可以通过 ID 获取 SVG 元素并对其进行操作。 这带来了许多可能性，例如使用 JavaScript 和 CSS 更改元素并为其设置动画，或者创建响应式图形。
查看此示例：#1 - 咖啡机 - CodePen 上的 Jonathan Silva (@jonathansilva) 的 CSS3 SVG 动画。
与其他矢量格式一样，SVG 图像可以缩放到任何尺寸，而不会丢失任何细节。 例如，同一个图标可以以多种格式使用，并且在任何屏幕比特率（例如Retina显示器）上看起来都非常清晰，而不需要将其保存为多个文件。
矢量图像（右）可以任意放大，同时保持图像质量
SVG 的用途
SVG 在线条艺术、徽标、图标、插图和数据可视化方面用途广泛。 但它不适合逼真的图像和细节较多的复杂图片。 在某些情况下，SVG 和 PNG 都可以很好地达到相同的目的。 对于腰围艺术，SVG 通常会生成较小的文件。 但这并不是不可避免的，实际情况将取决于矢量图像有多少个锚点，甚至可能会生成比PNG更大的文件。 SVG 真正的亮点在于数据可视化。 由于可以使用 JavaScript 操作和创建矢量动画，因此 D3 等库提供了无限的可能性。
徽标、图标和数据可视化是 SVG 使用的绝佳示例。
压缩SVG
在大多数情况下，没有必要使用 SVGz (GZipped SVG) 等工具来压缩 SVG 文件以在网页中使用。 您可以（并且应该）在服务器上打开 Gzip 来实现压缩，尽管效果可能不大。 更好的方法是通过消除 SVG 矢量图形中不必要的锚点、元素和属性来减小文件大小。 锚点勾画矢量图形的轮廓，因此您需要确保删除的锚点不会影响矢量图形的最终形状。 如果您使用 Adobe Illustrator 编辑 SVG，请确保使用“导入”>“导出为...”而不是“文件”>“另存为...”进行保存，因为这会生成最小的文件，这当然还有其他优点。 在 Sketch 中，请注意不要使用不必要的文件夹，因为它们也会作为额外标签保存到 SVG 中。
清理不必要的节点是缩小 SVG 大小的一种方法。
元素标签是 SVG 文件中包含的所有内容，包括开始和结束标签。 Adobe Illustrator 和 Sketch 等矢量编辑软件可能会弄乱富含不必要元素和属性的 SVG。 SVG 压缩器可用于删除这些冗余信息。 Compressor 和 SVGOMG 等在线工具可以完成这项工作。 如果您是开发人员并且不习惯清除和压缩SVG，则可以使用手动执行工具SVGO。 如果你是设计师，你可以和项目的开发人员讨论SVG的优化，并通过使用自动化的方法来阻止你自动完成。 优化。
在下面的示例中，从 Sketch 导入的图标的大小为 1364B。 相同的图标经过清理和压缩后，大小降至 460B — 减少了 66%。
在 CodePen 上查看此示例：Bruno Müller (@brunomuler) 的 Sketch 中的 SVG。
优化前：
优化的 SVG：
与任何其他技术一样，图像格式也在不断发展。 作为网页设计师和开发人员，我们主要关心的是浏览器兼容性。 几年前css3亮度，在IE6为主流浏览器的时代，PNG无法使用透明通道。 在不久的将来，也许我们会使用新的格式，例如 Google 的 WebP 或其他尚未创建的图像格式。
了解如何使用和优化每种图像格式将确保更好的用户体验。 因为用户将能够更早地预览和接收内容，同时减少带宽使用。 它还为设计人员提供了新的机会来绘制草图以创建动画和响应式页面。
我希望本文有助于解决网络上图像格式的许多不确定性。 如果您还有任何疑问或建议，请在下方评论或联系我。 另外，如果您觉得这篇文章对您有帮助，别忘了分享哦。
发表评论