网站图像格式：为正确的任务选择正确的格式

Question

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

在尝试找出用于特定任务的格式时，我总是发现自己处于两难境地......例如，我应该全面使用.jpg吗？或何时以及为什么要使用.png？

例如，在 Amazon 的网站上，他们使用 .jpg 作为产品图片（Example）， .gif 用于CSS Sprites（Example）的透明像素（Example）和 .png

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

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

[UPDATE]

感谢CruellO this link解释差异，并Dustin说明了使用内容的原因。

Answer 1

您应该了解一些关键因素......

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

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

还有不同的颜色深度（调色板）：Indexed color和Direct color。

使用索引表示图片只能存储图片作者选择的有限数量的颜色（通常为256），直接表示您可存储数千种未被作者选择的颜色。

---

BMP - 无损/索引和直接

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

适合：真的没有。没有任何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透明度。

我希望有所帮助！

Answer 2

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

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

PNG确实允许8位透明度，但如果你必须支持IE，你会发现他们不断拒绝正确支持。据我所知，他们做支持8位图像中的一点透明度（基本上与gif相同）。还有许多黑客可以在IE中使用8位透明度。我自己从未打扰过。

总结：

• 照片→jpg
• ！照片→png

Answer 3

在以下情况下应使用

PNG ：

• 您需要透明度（1位或Alpha透明度）
• 无损压缩效果很好（例如图表或徽标，或计算机生成的图像）​​

在以下情况下应使用

JPEG ：

• 无损压缩效果不佳（例如照片）
• 需要全彩色

GIF 应该是：

• PNG不可用，例如在非常旧的软件或浏览器上
• 动画是必要的

尽管有相反的说法，但PNG在大多数方面都优于GIF。除了动画之外，PNG还能够实现GIF的每种图像模式，并且当使用相同的图像模式时，与LZW相比，PNG具有更好的压缩效果，因为它具有更好的DEFLATE算法。 PNG还能够提供GIF无法执行的其他模式，例如24位颜色和Alpha透明度，但这是您可能在网络上遇到问题的地方。 Alpha透明度与IE6的兼容性问题已得到很好的记录（虽然存在乱码）。

PNG模式包括（这只是一个小子集）

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

要在网页的PNG中获得最佳压缩效果，请始终使用调色板模式。如果您发现PNG文件大于等效的GIF文件，那么您将以24位颜色保存PNG并在调色板模式下保存GIF（因为GIF始终处于调色板模式）。首先尝试转换为调色板模式。

如果您发现在GIF文件中IE6中具有透明度的PNG文件无法正常工作，那么您在PNG和调色板模式下使用24位颜色+ Alpha透明度，并使用带GIF的透明颜色。您必须确保将PNG转换为具有透明色的调色板颜色模式。

PNG还有其他模式，例如调色板中具有Alpha透明度的调色板颜色。这样的模式不能在Photoshop中使用。

Answer 4

尝试查看此网站 http://www.killersites.com/articles_2005/theory/imagesInWebPages.jsp

他们试图解释什么时候使用

Answer 5

如果您要存储或展示大量图片，则新Google WebP format可能值得考虑，因为它比PNG / JPG小25％。 请注意，目前并非所有浏览器都支持此功能。 NB。这个问题发布后，于2010年问世。

Answer 6

JPEG文件格式

1. 当您需要保持较小的尺寸时，非常适合拍照
2. 照片的好选择
3. 不适用于徽标，艺术线条和宽阔的平面区域

GIF文件格式

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

PNG文件格式

1. 无损
2. 当透明度是必须时的最佳选择
3. 徽标和艺术线条的好选择
4. 到处都不支持

您可以在此信息图中查看更详细的信息，Image File Types: When to use JPEG, GIF & PNG