logo标签列表

小型网站图片应该选择哪种格式？GIF 还是 PNG？

graphicspngfile-formatgif
35

在制作网站的小图标、页眉等元素时，使用GIF还是PNG更好呢？

显然，如果需要透明效果，那么PNG绝对是首选，而对于较大的照片图片，我会使用JPEG格式 - 但对于常规的网页“家具”，您会推荐使用哪种格式以及为什么？也许只是我使用的工具问题，但与相似大小的PNG文件相比，GIF文件通常似乎稍小一些，但使用它们似乎过于老旧。

有用的：https://dev59.com/gnE95IYBdhLWcg3wY81l - Chuck Le Butt
17个回答
58
作为一般规则，由于卓越的压缩能力，PNG通常比GIF更好，而且从未更差。可能有一些特殊情况下GIF略微优于PNG（因为PNG格式可能具有稍大的元数据开销），但这真的不值得担心。

可能只是我使用的工具问题，但与可比较的PNG相比，GIF文件通常似乎要小一些

这可能确实是由于您使用的编码工具所致。

/EDIT:哇，关于PNG文件大小似乎存在很多误解。引用Matt的话:

对于颜色较少的图像，使用GIF没有问题，而且正如您所发现的，它们往往更小。

这是典型的编码错误，而不是格式固有的问题。您可以控制颜色深度并使PNG文件变小。请参阅维基百科文章中的relevant section。
此外，Chrono夸大了MSIE6缺乏支持:

如果您需要透明度并且可以使用GIF，则建议使用它们，因为IE6支持它们。 IE6不支持透明PNG。

那是错的。MSIE6 支持 PNG透明度。虽然它不支持alpha通道（没有一些技巧），但这是一个不同的问题，因为GIF根本没有它。
使用GIF而不是PNG的唯一技术原因是需要动画效果并且不想依赖其他格式。
感谢详细的答案 - 我经常自己想这个问题，特别是“IE缺乏PNG支持”的问题。 - Chris Marasti-Georg
关于文件大小和编码工具，我强烈推荐使用PNGOUT（http://advsys.net/ken/utils.htm）来压缩PNG文件。 - Bradley Grainger
2
很棒的回答 - 但是你最后一句话好像少了一个词。真希望我能为你编辑它... - Cory House
另一个技术原因是你想要 alpha 通道。 - recursive
12

W3C提到PNG比GIF有以下三个优点：

• Alpha通道（可变透明度）

• 跨平台伽马校正（控制图像亮度）和颜色校正

• 二维交错（一种渐进显示方法）。

此外，请参考以下资源以获取指导：

7

哇，我对这里所有错误的答案感到非常惊讶。当正确优化时，PNG-8始终比GIF小。只需通过PngCrush或其他PNG优化例程运行PNG-8文件即可。

需要理解的关键要点：

  • PNG8和GIF是无损的<= 256种颜色
  • PNG8始终可以比GIF更小
  • 除非需要动画，否则不应使用GIF

当然,

  • 对于黑白或全彩色照片图像，请使用JPG
  • 对于低色彩、线条艺术、屏幕截图类型的图像，请使用PNG
3
值得指出的是，一个16x16或更小的图像总是只有256种或更少的颜色，因为它只有256个或更少的像素！ - Mark Ransom
5
2
即使自由软件基金会和GNU项目在其网站上使用了一些GIF，但是GIF专利问题已经过去了。 - Corey Goldberg
3
2
IE浏览器与PNG格式图片的基本问题在于它会对目标伽马值进行错误的伽马校正。而GIF格式之所以不受影响，是因为GIF没有提供指定伽马值的方式。为了解决这个问题，您可以让您的图形应用程序在保存PNG格式图片时不使用伽马校正。详情请参见http://www.libpng.org/pub/png/png-gammatest.html。 - Stewart
3
这个链接http://hsivonen.iki.fi/png-gamma/解释了没有伽马校正的PNG图像在某些浏览器上仍然会显示不正确。也许这些浏览器已经太过陈旧，您无需担心它们，但每个人都应该至少了解这个问题。 - Mark Ransom
我可以想象，在硬件和/或操作系统中具有伽玛调整的非Windows平台上，某些浏览器可能会根据其规范将CSS颜色调整为sRGB，但会保留未提供颜色空间信息的PNG图像不予调整。因此，在PNG中指定sRGB应该是可以的，但我发现Firefox出于某种我无法想象的原因自行处理了一些内容。 - Stewart
2

我认为这并不会有太大的影响（客户并不在意）。个人而言，我会选择PNG格式，因为它是W3C标准。

请注意PNG透明效果：它们无法在IE6中使用。

不适用于IE6限制。有解决方法，8位PNG无需任何技巧即可在其中工作。 - PhiLho
2
对于网页上的图片，每种格式都有其优缺点。对于类似照片的图像（即大量颜色，没有硬边缘）使用JPEG格式。
对于图标等，您可以选择PNG或GIF格式。 GIF仅限于256种颜色。 PNG可以像GIF一样格式化（即256种颜色，带有1位透明度，在IE6中可用），但对于小图像而言，它们比GIF略大。 24位PNG支持大色域和Alpha透明度（虽然在IE6中可能会有问题）。
PNG是您唯一真正明智的选择，用于屏幕截图之类的东西（即既有大量颜色又有硬边缘），并且就个人而言，这是我大多数时间所坚持的，除非我有某些更适合JPEG的东西（例如照片）。
2

索引PNG（小于256种颜色）实际上比gif始终更小，因此我大多数情况下都使用它。

1

GIF格式的一个主要问题是它是受专利限制的格式（编辑：这显然不再是事实）。如果您不关心这个问题，可以随意使用GIF。PNG相对于GIF具有更多的灵活性，尤其是在颜色空间方面，但这种灵活性通常意味着您需要在发布之前"优化" PNG 。您可以在网络上搜索平台工具来完成这个过程。

当然，如果您想要动画效果，则只能使用GIF，因为MNG由于某些原因基本上没有人使用了。

1
Unisys的GIF专利（美国4,558,302）于2003年6月到期。 - stevenvh
1

对于计算机生成的图形（例如在 Photoshop，Gimp 等软件中绘制），JPG 不可行，因为它是有损压缩 - 也就是说会出现随机的灰色像素。对于静态图像，PNG 在每个方面都更好：更多颜色，可扩展的透明度（例如，10％透明度，.gif 仅支持0％和100％），但存在一个问题，就是某些版本的 Internet Explorer 无法正确处理 PNG 的透明度，所以您会得到平坦的非透明背景，看起来很丑陋。如果您不关心这些 IE 用户，请使用 PNG。

顺便说一句，如果您想要动画效果，请使用 GIF。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接