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

StackOverflow https://stackoverflow.com/questions/392635

  •  23-08-2019
  •  | 
  •  

题

当设计一个网站，你认为什么是最好的图像格式用于一个特定的任务？

我总是发现自己处于困境时，试图找出是什么格式用于一个特定的任务...就像例如， 我应该使用。jpg所有圆？ 或者， 什么时候和为什么我应该使用。png?

例如，考虑 亚马逊's网站，他们使用 .jpg 对于产品的图像(例), .gif 对于这种透明像素(例)和 .png 他们CSS精灵(例)

另一方面， Play.com 使用 .gif 为他们的网站的标志(例)，但使用 .jpg 为他们的网站产品(如亚马逊)(例)，并尽他们的主页上，他们没有任何 .pngs上。

所以什么样的格式应当我用我的网站?为什么我应该使用他们？

[新]

感谢 CruellO 对于 这个链接 用于说明的差异，并且还 达斯汀 对于放弃的原因是什么使用。

有帮助吗？

解决方案

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

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

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

总之：

  • 照片→jpg
  • ！照片 → png

其他提示

你应该知道一些关键因素...

第一，有两种类型的压缩： 无损 和 有损失的.

无损 意味着，图像是由较小，但在不损害质量。 有损失的 装置的图像制作(甚至)较小，但在损害质量。如果你救了一个图象中的一种有损格式，图像质量将得到逐步糟。

也有不同颜色的深度(调色板): 索引颜色 和 直接颜色.

与 索引 这意味着像只能储存有限数量的色彩(通常256)，选择通过图像提交人， 直接的 这意味着你可以储存成千上万的颜色，都没有被选中的作者。

BMP 无损的/编入索引并直接

这是一个古老的格式。它是无损的(没有图像的数据丢失，在保存)但也有几乎没有压缩在所有，意味着节省BMP结果在很大的文件的大小。它可以有的调色板的两个索引和直接的，但这是一个很小的安慰。该文件的尺寸是如此不必要地大，没有人真正采用这个格式。

好的：没什么真的。有没有什么BMP擅长，或者没有做好通过的其他格式。

BMP vs GIF

GIF 无损的/编入索引只

GIF使用无损压缩，这意味着你可以保存图像过，永不会丢失任何数据。该文件的尺寸是多少小于BMP，因为良好的压缩实际上是使用，但只能储存索引的调色板。这意味着只能有一个最大的256个不同颜色的文件。这听起来像一个相当少量的，它是。

GIF还可以将图像动画和具有透明度。

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

GIF vs JPEG

JPEG -有损/直接

Jpeg图片的设计进行详细的照片图像尽可能的小通过消除信息，人眼会不会通知。因此，它是一个有损格式，节省的同样的文件将导致更多的数据丢失了时间。它有一个调色板的成千上万的色彩，并因此是很棒的照片，但是有损压缩装置，这是不好的标志和线图：这不仅将他们看起来模糊，但是这种图像也会有较大文件的规模相比，Gif！

好的：照片。此外，梯度。

JPEG vs GIF

PNG-8 无损的/编入索引

巴布亚新几内亚一个较新的格式，并PNG-8(索引版巴布亚新几内亚)的确是一个很好的替代Gif。然而，可悲的是，它有一些缺点：首先，它不能支持的动画像GIF可以(以及它可以，但只有Firefox似乎支持它，不同GIF动画这是支持由每浏览器)。其次它拥有一些支持问题与旧的浏览器就像IE6。第三，重要的软件，如Photoshop具有非常差的执行情况的格式。(该死的你，Adobe!) PNG-8只能存储256个颜色，喜欢Gif。

好的：主要的事情，PNG-8比Gif是具有支持阿尔法的透明度。

PNG-8 vs GIF

重要说明： Photoshop不支持阿尔法透明度对于PNG-8文件。(该死的你，Photoshop！) 有办法转换Photoshop PNG-24PNG-8文件，同时保持其透明度，虽然。一种方法是 PNGQuant, ，另一个是救你的文件 烟花.

PNG-24 -无损/直接

PNG-24是一个伟大的格式，结合无损的编码与直接的颜色他收入和调整(单位：千色彩，就像JPEG)。这是非常喜欢BMP在这方面，除了巴布亚新几内亚的实际图像压缩，因此它的结果在小得多的文件。不幸的是PNG-24文件仍然会远远大于Jpeg,Gif和PNG-8s，所以你还是需要考虑如果你真的想要使用一个。

即使PNG-24s允许成千上万的颜色，同时具有压缩，它们不是用来替换的JPEG图像。一张照片作为保存PNG-24很可能将至少5次大于等同的JPEG图像，具有非常小的改善可见的质量。(当然，这可能是一个理想的结果如果你不关心文件的尺寸，并希望得到质量最好的图像，你可以。)

就像PNG-8,PNG-24支持阿尔法透明度。

我希望这可以帮助!

巴布亚新几内亚 应在以下情况下使用：

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

JPEG 应在以下情况下使用：

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

动图 应该是当：

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

尽管有相反的说法，PNG 在大多数方面都优于 GIF。PNG 能够支持除动画之外的 GIF 的所有图像模式，并且当使用相同的图像模式时，由于其比 LZW 更优越的 DEFLATE 算法，PNG 将具有更好的压缩效果。PNG 还具有 GIF 无法实现的其他模式，例如 24 位颜色和 Alpha 透明度，但这就是您在网络上可能遇到问题的地方。Alpha 透明度与 IE6 存在兼容性问题，这些问题已有详细记录（尽管存在解决办法）。

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

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

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

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

PNG 还具有其他模式，例如调色板中带有 alpha 透明度的调色板颜色。此类模式无法在 Photoshop 中使用。

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

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

如果你是存储或呈现大量图像的新谷歌的WebP格式可能是值得考虑的，因为它比PNG / JPG小25％。 请注意，这不是由目前所有浏览器都支持。 NB。这在2010年就出来了这个问题被张贴后。

JPEG 文件格式

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

GIF 文件格式

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

PNG 文件格式

  1. 无损
  2. 当透明度是必须的时候的绝佳选择
  3. 徽标和线条艺术的不错选择
  4. 并非所有地方都支持

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top