JPEG vs PNG vs BMP vs GIF vs SVG

Question

我想知道对于相同质量的图片，这些格式中的哪一种需要较少的内存，以及这些格式之间的主要区别是什么。

Answer 1

来自 lbrandy.com 的xkcd 风格：

Answer 2

您应该了解几个关键因素...

首先，有两种类型的压缩：Lossless和Lossy。

• 无损意味着图像变小，但不影响质量。
• 有损意味着图像变得（甚至）更小，但会损害质量。如果您一遍又一遍地以有损格式保存图像，图像质量会越来越差。

还有不同的颜色深度（调色板）：索引颜色和直接颜色。

• 索引意味着图像只能存储有限数量的颜色（通常是 256 种），由作者控制，称为颜色映射
• 直接意味着您可以存储作者未直接选择的数千种颜色

BMP - 无损/索引和直接

这是一种旧格式。它是无损的（保存时没有图像数据丢失）但也几乎没有压缩，这意味着保存为 BMP 会导致非常大的文件大小。它可以有索引和直接的调色板，但这是一个小小的安慰。文件太大了，以至于没有人真正使用过这种格式。

适合：没什么。没有任何 BMP 擅长的地方，或者没有其他格式做得更好。

GIF - 无损/仅索引

GIF 使用无损压缩，这意味着您可以反复保存图像而不会丢失任何数据。文件大小比BMP小很多，因为实际上使用了很好的压缩，但它只能存储一个索引调色板。这意味着对于大多数用例，文件中最多只能有 256 种不同的颜色。这听起来很小，而且确实如此。

GIF 图像也可以是动画的并且具有透明度。

适用于：徽标、线条图和其他需要很小的简单图像。只真正用于网站。

JPEG - 有损/直接

JPEG 图像旨在通过删除人眼不会注意到的信息来使详细的摄影图像尽可能小。因此，它是一种有损格式，一遍又一遍地保存相同的文件会导致随着时间的推移丢失更多数据。它有数千种颜色的调色板，因此非常适合照片，但有损压缩意味着它对徽标和线条图不利：它们不仅看起来模糊，而且与 GIF 相比，此类图像的文件大小也会更大！

适合：照片。还有渐变。

PNG-8 - 无损/索引

PNG 是一种较新的格式，PNG-8（PNG 的索引版本）确实是 GIF 的一个很好的替代品。然而，遗憾的是，它有一些缺点：首先，它不能像 GIF 那样支持动画（它可以，但似乎只有 Firefox 支持它，不像每个浏览器都支持的 GIF 动画）。其次，它对 IE6 等旧浏览器存在一些支持问题。第三，像Photoshop这样的重要软件对格式的实现很差。（该死，Adobe！）PNG-8 只能存储 256 种颜色，例如 GIF。

优点：PNG-8 比 GIF 做得更好的主要事情是支持 Alpha 透明度。

重要说明： Photoshop 不支持 PNG-8 文件的 Alpha 透明度。（该死的，Photoshop！）不过，有一些方法可以将 Photoshop PNG-24 文件转换为 PNG-8 文件，同时保持其透明度。一种方法是PNGQuant，另一种方法是使用Fireworks保存文件。

PNG-24 - 无损/直接

PNG-24 是一种很好的格式，它结合了无损编码和直接颜色（数千种颜色，就像 JPEG 一样）。在这方面，它与 BMP 非常相似，不同之处在于 PNG 实际上压缩图像，因此它会生成更小的文件。不幸的是，PNG-24 文件仍然比 JPEG、GIF 和 PNG-8 文件大得多，因此您仍然需要考虑是否真的要使用它们。

尽管 PNG-24 在压缩时允许数千种颜色，但它们并不打算取代 JPEG 图像。保存为 PNG-24 的照片可能至少比等效的 JPEG 图像大 5 倍，可见质量几乎没有改善。（当然，如果您不关心文件大小，并且想要获得最佳质量的图像，这可能是一个理想的结果。）

与 PNG-8 一样，PNG-24 也支持 alpha 透明度。

SVG - 无损/矢量

目前越来越流行的一种文件类型是 SVG，它与上述所有文件类型的不同之处在于它是一种矢量文件格式（以上都是raster）。这意味着它实际上由线条和曲线而不是像素组成。当您放大矢量图像时，您仍然会看到一条曲线或一条线。当您放大光栅图像时，您将看到像素。

例如：

这意味着 SVG 非常适合您希望在 Retina 屏幕或不同尺寸下保持清晰度的徽标和图标。

此外，SVG 文件是使用 XML 编写的，因此可以在文本编辑器中打开和编辑，如果您愿意，可以随时对其进行操作。例如，您可以使用 JavaScript 更改网站上 SVG 图标的颜色，就像更改某些文本一样（即不需要第二张图片）。

我希望这有帮助！

Answer 3

来自TIFF、GIF、JPG、JPEG、PNG 和 BMP 文件有什么区别？

BMP - 位图。这可能是我记得的第一种数字图像格式。那时计算机上的每张图片似乎都是 BMP。在 Windows XP 中，Paint 程序自动将其图像保存在 BMP 中。但是，在 Windows Vista 和更高版本中，图像现在保存为 JPEG。BMP 是许多其他文件类型的基础平台。

JPG / JPEG -（联合摄影专家组）Jpeg 格式用于彩色照片，或任何具有多种混合或渐变效果的图片。锐边不好，除非以高质量存储，否则会使它们有点模糊。这种格式随着数码相机的发明而流行起来。大多数（如果不是全部）数码相机将照片作为 Jpeg 文件下载到您的计算机。显然，数码相机制造商看到了最终占用更少空间的高质量图像的价值。

GIF -（图形交换格式）Gif 格式最适合用于文本、线条图、屏幕截图、卡通和动画。Gif 的总数限制为 256 色或更少，因此 Gif 图像相对较小。它通常用于快速加载网页。它还为您的网页制作了一个很棒的横幅或徽标。动画图片也可以以 GIF 格式保存为静态图像序列。例如，一个闪烁的横幅将被保存为一个 Gif 文件。

PNG -（便携式网络图形）这种无损格式是最好的图像格式之一。它并不总是与所有网络浏览器或图像软件兼容，但现在它是用于网站的最佳图像格式。我将 .png 用于徽标和屏幕截图。它最惊人的能力之一是能够无损地压缩图像（不丢失像素），尽管最终压缩的大小因图像编辑器而异。

TIFF -（标记图像文件格式）此文件格式自 1992 年以来未更新，现在归 Adob​​e 所有。它可以在一个文件中存储图像和数据（标签）。TIFF 可以压缩，但更确切地说，它能够以无损格式存储图像数据，使 TIFF 文件成为有用的图像存档，因为与标准 JPEG 文件不同，使用无损压缩（或不压缩）的 TIFF 文件可以被编辑和重新- 在不损失图像质量的情况下保存。此文件通常用于扫描、传真、文字处理等。它不再是用于数码照片的常见文件格式，因为 jpeg 质量上乘且占用空间更少。

Answer 4

现有的答案包括很少的技术数据，所以我会在这里包括。

• JPEG：高达 24 位颜色（可能更多？），可变（通常是高）压缩，有损，不支持 alpha
• PNG：高达 48 位颜色，适度压缩，无损，alpha 支持
• BMP：高达 24 位颜色，极少压缩，无损，alpha 支持
• GIF : 最高 8 位颜色，小压缩，无损，透明支持，动画支持

颜色深度

• 8 位色 == 256 色
• 24 位色 == 16,777,216 色
• 48 位色 == 281,474,976,710,656 色

大多数计算机显示器以 24 位色深运行。人眼可以分辨这么多颜色。额外的颜色深度主要是为了能够保留来自传感器的信息，以便处理照片时可以使用更多数据。尝试以 8 位颜色表示照片会导致颗粒感。

压缩

这基本上是指最终文件的大小。更多的压缩等于更小的文件。但是，JPEG 通过丢弃数据来获得较小的文件大小。这称为“有损”压缩，因为您永远无法恢复原始未压缩数据。它的压缩也针对高对比度边缘不常见的照片进行了优化。正如其他答案中所述，对于照片以外的任何事物来说，这都是一个糟糕的选择。

Alpha/透明度

Alpha 指的是透明度，但它意味着有不止一个级别的透明度。GIF 能够定义透明像素，但它要么是不透明的，要么是 100% 透明的，并且“透明”被用作 256 种颜色之一。PNG 和 BMP 能够将每个像素标记为不透明、透明或部分透明，就像一块彩色玻璃。最常见的是，有 256 个透明度级别，但 PNG 实际上最多可以有 65,536 个级别。JPEG 不支持透明度。

动画片

实际上，在这些格式中，只有 GIF 支持动画。有 PNG（MNG、APNG）和 JPEG（MJPEG）动画规范，但它们并未得到广泛支持。（APNG 适用于 Firefox 和 Opera 的最新版本。）实际上，您在网页上看到的大多数动画都是在 Flash 中实现的。

Answer 5

• 如果图像颜色很少（如图标），请使用 GIF。也可用于动画图像（如广告横幅）。
• 如果图像有多种颜色（如照片），请使用 JPG。JPEG 是一样的。
• 如果您想在不压缩的情况下保存图像，请使用 BMP。更大的文件大小！
• 如果您想在网络上发布图像并了解现代标准，请使用 PNG。优点：适合作为 GIF 和 JPG 的现代替代品，并且是一个开放标准，并允许透明度。缺点：旧软件不支持，文件大小可能比类似的 GIF 或 JPG 大。

Answer 6

BMP：

• 旧格式。不会丢失数据。
• 未压缩 - 存储每个像素的值。因此，相同尺寸的图片具有相同的文件大小（千字节/兆字节）。例如，800×600 BMP 图像总是 1.37 MiB，就像流行的 WinXP 壁纸“Bliss”连绵起伏的山丘一样。
• 不支持透明/半透明
• 不推荐用于任何事情

JPG：

• 有损压缩。
• 可以设置损失量，例如，在 Photoshop 中创建图形和保存时。
• 保存为更高质量意味着更少的颜色/深度损失和高文件大小，反之亦然。
• 不支持透明/半透明
• 推荐用于照片，而不是用于图形/图标

PNG：

• 无损压缩（是的，最好的两个词/世界）
• 支持透明和半透明，两者是不同的
• 推荐用于静态图形/图标，不适用于照片

动图：

• 支持透明但不支持半透明
• 仅推荐用于动画图形/图标
• 也许哈利波特中框架中的动态照片是 GIF :D