48

在设计网站时，您认为用于特定任务的最佳图像格式是什么？

当我试图找出用于特定任务的格式时，我总是陷入两难境地……例如，我应该全面使用 .jpg 吗？ 或者，何时以及为什么应该使用 .png？

例如，以亚马逊的网站为例，他们使用.jpg作为产品图片（示例），.gif作为透明像素（示例），.png作为他们的 CSS Sprites（示例）

另一方面，Play.com使用.gif作为其网站徽标（示例），但使用.jpg作为其网站产品（如亚马逊）（示例），就其主页而言，他们没有任何.png就可以了。

那么我应该为我的网站使用哪些格式？我为什么要使用它们？

[更新]

感谢CruellO的这个链接解释了这些差异，也感谢Dustin给出了使用什么的理由。

4

5 回答 5

74

你应该知道几个关键因素...

首先，有两种类型的压缩：无损和有损。

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

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

使用索引意味着图像只能存储图像作者选择的有限数量的颜色（通常为 256 种），使用直接意味着您可以存储作者未选择的数千种颜色。

BMP - 无损/索引和直接

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

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

BMP 与 GIF

GIF - 无损/仅索引

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

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

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

GIF 与 JPEG

JPEG - 有损/直接

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

适合：照片。还有，渐变。

JPEG 与 GIF

PNG-8 - 无损/索引

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

优点：PNG-8 比 GIF 做得更好的主要方面是支持 Alpha Transparency。

PNG-8 与 GIF

重要说明： 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 透明度。

我希望这会有所帮助！

于 2013-05-08T12:32:09.913 回答
53

JPEG 用于照片。我偶尔会看到带有文本的 JPEG，它们看起来很糟糕。文本最适合文本，否则使用 PNG。

如果它不是照片，但您想要它的图形，请使用 PNG。PNG 几乎总是比等效的 gif 文件小，并且不会像 JPEG 文件那样丢失质量。相当于 JPEG 的 PNG 通常会大很多（假设它是逼真的）。有时这仍然是可取的。

PNG 确实允许 8 位透明度，但如果您必须支持 IE，您会发现他们不断拒绝正确支持。据我所知，它们确实支持 8 位图像（基本上与 gif 相同）中的一点透明度。还有许多技巧可以让 8 位透明度在 IE 中工作。我从来没有打扰过，我自己。

总之：

  • 照片 → jpg
  • !照片 → png
于 2008-12-25T08:51:57.280 回答
14

在以下情况下可以使用PNG ：

  • 您需要透明度（1 位或 alpha 透明度）
  • 无损压缩效果很好（例如扁平式图标或徽标）

JPEG可用于以下情况：

  • 无损压缩效果不好（比如照片）

GIF可用于以下情况：

  • 动画是必要的，视频是不可能的（尽管你真的应该尝试使用视频；动画 GIF 质量很差而且效率很低）

尽管存在相反的神话，但在同类比较中，PNG 在所有方面都优于 GIF。PNG除了动画之外，可以支持GIF的所有图像模式，并且在使用相同的图像模式时，PNG由于其DEFLATE算法优于LZW，因此具有更好的压缩率。PNG 还具有 GIF 无法做到的其他模式，例如 24 位颜色和多位透明度（alpha 透明度）。请注意，当人们使用 IE6 时，多位透明度曾经是一个问题。

PNG 模式包括（这只是一小部分）

  • 2 到 256 色的调色板颜色（如 GIF）
  • 调色板颜色 2 到 256 色，带透明色（如 GIF）
  • 真彩色（24 位彩色）
  • 带 Alpha 通道的真彩色（24 位颜色 + 8 位透明度）

为了在 Web 上使用 PNG 进行最佳压缩，请始终使用调色板模式。如果您发现 PNG 文件比同等的 GIF 文件大，那么您很可能将 PNG 保存为 24 位颜色，并将 GIF 保存为调色板模式（因为保存全彩色 GIF 总是需要转换为调色板模式）。在两种情况下保存之前尝试将图像转换为调色板模式。

PNG 还具有其他模式，例如调色板中带有 alpha 透明度的调色板颜色。诸如此类的模式在浏览器中工作，但由于不支持这些图像模式，像 Photoshop 这样的软件在创建或使用它们时存在（或曾经存在）问题。

于 2009-03-04T14:18:26.790 回答
1

如果您要存储或呈现大量图像，新的Google WebP 格式可能值得考虑，因为它比 PNG/JPG 小 25%。请注意，目前并非所有浏览器都支持此功能。注意。这是在发布此问题后于 2010 年发布的。

于 2016-03-24T09:31:50.320 回答
0

JPEG 文件格式

  1. 非常适合需要保持较小尺寸的图像
  2. 拍照的好选择
  3. 不利于徽标、线条艺术和大面积的纯色

GIF 文件格式

  1. 非常适合动画效果
  2. 剪贴画、平面图形和使用最少颜色和精确线条的图像的不错选择
  3. 带有色块的简单徽标的不错选择

PNG文件格式

  1. 无损
  2. 必须透明时的绝佳选择
  3. 标志和线条艺术的好选择
  4. 并非所有地方都支持

您可以查看此信息图表以获取更多详细信息，图像文件类型：何时使用 JPEG、GIF 和 PNG

于 2014-12-11T13:48:13.103 回答