logo标签列表

我该在什么情况下使用哪种图片类型？GIF、JPG还是PNG？

htmlimage
8
我正在尝试创建一个个人主页，以了解更多关于网页设计（JavaScript、使用Photo Shop等）的知识。我计划在左侧添加图形菜单，在顶部添加横幅，并且还要添加一个“照片”部分，可以展示我拍摄的各种照片。
然而，当我查看其他类似的网站时，我发现一些使用GIF，一些使用JPG，甚至有些使用PNG。它们之间有什么区别？对于网站上使用的图形图像，我应该使用GIF，对于我的照片应该使用JPG吗？我应该将所有内容都制作成PNG吗？

完全重复：

https://dev59.com/BnRC5IYBdhLWcg3wKtv2 - Andreas Grech
Kieron，IE6 不支持某种类型的 PNG 透明度，即 alpha 透明度。它支持 1 位透明度，就像 GIF 中一样，没问题。 - thomasrutter
好消息是，根据Net Applications的数据，IE6的市场份额终于低于20％了。截至上个月，它现在比Firefox更不受欢迎 :-) - Steve Jessop
这绝对不是第二个链接的副本。但它是第一个链接的副本。 - thomasrutter
有用的：https://dev59.com/gnE95IYBdhLWcg3wY81l - Chuck Le Butt
显示剩余3条评论
10个回答
23
这是一部XKCD漫画吗？如果是，你能提供链接吗？=8-) - Yuval
虽然很有趣，但并不是很能解释清楚。 - Stefan Thyberg
这个回答被评为最佳答案...这个网站每天都更像Digg。 - typeoneerror
3
当然，这是绝对的XKCD。简单解释一下：右边看到的是JPEG压缩伪影——JPEG适用于照片（有损压缩在那里更可接受），但在锐利的边缘上效果不佳。这就是PNG的用处（左边）。 - Piskvor left the building
1
这不是真正的XKCD，只是来自博客文章的“XKCD风格”，现在已经链接到图片下方。 - TJL
我必须说，我真的很喜欢这个漫画......同事们也觉得很有趣。 - Ascalonian
23

PNG应当在以下情况下使用：

  • 需要透明度（1位或alpha透明度）
  • 无损压缩效果好（例如用于图表、标志或计算机生成的图像）

JPEG应当在以下情况下使用：

  • 无损压缩效果不佳（例如照片）

GIF应当在以下情况下使用：

  • PNG不可用，例如非常老旧的软件或浏览器
  • 需要动画效果

尽管有许多误解，PNG在大多数方面都优于GIF。 PNG能够处理除动画以外的GIF的每个图像模式。使用相同的图像模式时，由于其出色的DEFLATE算法与LZW相比，PNG将具有更好的压缩效果。PNG还可以处理GIF无法处理的其他模式，如24位颜色和alpha透明度等，但这就需要谨慎了：如果您忘记将图像转换为调色板模式，则PNG图像可能会保存为24位彩色，从而占用更多空间。

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

  • 2到256种颜色的调色板颜色（类似于GIF）
  • 2到256种颜色的调色板颜色，具有透明颜色（类似于GIF）
  • 真彩色（24位颜色）
  • 带alpha通道的真彩色（24位颜色+8位alpha透明度）

要在Web上获得PNG最佳压缩效果，请使用调色板模式。如果发现PNG文件比等效的GIF文件更大，则是因为PNG以24位彩色保存，而GIF以调色板模式保存（因为GIF始终以调色板模式保存）。尝试先转换为调色板模式。

PNG还具有其他模式，例如带有透明度的调色板颜色。虽然Photoshop无法创建此类模式，但其他应用程序可以创建它们。

编辑2013：删除了关于IE6兼容性的一堆内容。

请注意，“始终使用调色板模式而不是真彩色模式来处理 PNG 文件以用于网页”这一段是一个概括，但如果您具有足够的经验来遇到真正需要真彩色 PNG 的情况，那么您可能不需要像这样的指南。这是我的假设。 - thomasrutter
PNG格式支持调色板颜色2到256种+8位透明度模式。详情请见：http://pornel.net/pngnq。同时，它在IE6中也能很好地降级。此外，还有其他模式可用（例如灰度和每通道16位）。 - Kornel
@porneL 我已更新答案，提到调色板+ alpha 模式可以在IE6中更优雅地降级。 - thomasrutter
@alex，这很可能是因为你的图形应用程序向图像添加了不必要的元数据，其中可能包括注释、伽马和颜色空间信息。Photoshop会这样做，这使得它成为创建适用于Web的PNG的不佳选择。所有事情都一样的话，PNG的开销比GIF小。 - thomasrutter
GIF确实支持一些元数据，但大部分是应用程序特定的。有些应用程序会在其中存储“注释”。 - thomasrutter
显示剩余2条评论
7

对于照片请使用JPG格式，对于除照片外的其他内容请使用PNG格式。GIF并不是一个非常好的格式，PNG在大多数应用中可以完全替代它，在压缩和质量方面都更好，但有时会存在兼容性问题，目前不确定这些问题是否已经在所有现代浏览器中得到解决。GIF可以被基本上所有设备读取，所以在这种情况下它非常有用。

5

PNG格式可以实现GIF格式的所有功能（除了动画，即使是动画也可以用APNG格式），而且通常比GIF格式更小。如果PNG格式不比GIF格式更小，则可能是您的软件保存不当-请寻找像PNGOUT和pngnq这样的PNG优化程序。

4

GIF存在以下问题：

  • 它仅支持最多256种颜色。
  • 它使用了一种受专利保护的压缩算法。

但它也有一个优点：

  • 它可以用来显示动画。

JPEG的压缩比可以比PNG/GIF高，但正如上面的漫画所示，它是有损压缩的。最好用于那些压缩伪影不明显的图像，例如照片。

将图像组合成纹理，并使用CSS进行解压缩，可以稍微减小文件大小并减少服务器请求次数。

请注意，GIF（或者更确切地说，GIF中使用的LZW算法）已经很多年没有受到专利保护了。LZW专利在2003年6月20日在美国过期，在一些（少数）愚蠢到授予算法专利的欧洲国家几年后也过期了。更多信息请参见http://www.kyzer.me.uk/essays/giflzw/，http://www.freesoftwaremagazine.com/node/1772和http://en.wikipedia.org/wiki/Graphics_Interchange_Format#Unisys_and_LZW_patent_enforcement。 - José Luis
3
依据您想要创建的内容而定。通常情况下，用PNG格式处理网页图像，而JPG格式适合照片。24位的PNG支持alpha透明度，所以如果您需要使用“真彩色”alpha透明度，这就是唯一的选项了。8位的PNG比GIF更好且尺寸更小，并且与GIF具有几乎相同的透明设置（即索引颜色板），因此没有理由再使用GIF（除非您在制作...恐怖...动画gif？）。请记住，PNG格式采用无损压缩，因此外观会比经过压缩的JPG更好。需要注意的一点是，在Internet Explorer 6及以下版本中支持PNG可能会很麻烦，但有许多解决方法。
3

GIF - 无损压缩，文件小，但只支持256种颜色，并且只有一个透明度（透明或不透明）。

JPEG - 文件较大，没有颜色限制，有损压缩。最适合处理照片。

PNG - 无损压缩，透明度更好（具有alpha通道），但IE6无法正确支持透明度，需要使用特殊修复方法（点击这里）。

这个答案非常误导人。你说JPEG是“更大”的意思是什么？实际上它往往更小。例如，在照片中它要小得多。 - thomasrutter
1
1
嗯，JPG并不是关于颜色的，它是一种有损格式（GIF是无损的），适用于照片，但对于文本、图标或任何具有突然颜色/对比度变化的内容来说就不太合适了，因为它使用的是行程编码。 - cletus
1
GIF在除了动画之外的任何方面都不是“最好”的选择，这只是因为PNG无法实现动画效果。而PNG也并不算真正的“新”，除非你认为Internet Explorer 4和Netscape 4是新的（它们是第一批支持PNG格式的浏览器）。 - thomasrutter
0
一般来说，JPEG 更适合用于照片，而 GIF 更适合用于图形对象，如按钮或渲染字母。PNG 在这两个方面都很好，但是由于开发读取/写入 GIF 或 JPEG 的程序需要支付许可费用，因此这种讨论往往会变得有点敏感，而 PNG 是免费的。
主要区别在于压缩，GIF 可以为按钮获得更小的文件大小，JPEG 可以为照片获得更小的文件大小。
我最好的建议是尝试使用所有三种格式提供的不同压缩选项，并自行决定要将哪种用于哪种目的。
哦，因为这主要涉及文件大小：请尝试从低带宽连接的计算机测试您的主页。这样，您就可以感受到是否需要担心压缩问题；-)
JPEG或GIF无需支付任何许可费用。曾经有过GIF的相关专利威胁，但这些专利已经在多年前到期。PNG在“两个方面”都不太好。它是GIF的良好替代品，但不适合替代JPEG。 - thomasrutter
@thomasrutter：你为什么认为PNG不是JPEG的好替代品？我觉得在压缩率和质量方面它已经足够了。 - Treb
PNG和JPEG满足不同的需求。最大的区别在于，JPEG是有损压缩，而PNG（像GIF一样）则不是，因此PNG无法很好地压缩照片或扫描图像。PNG是GIF的良好替代品（除了动画），但它几乎永远不是JPEG的良好替代品。如果您发现它是，那么很可能是JPEG本来就不是最佳选择的情况 - 我认为，在选择JPEG是最佳选择的情况下，PNG的出现并没有改变这种情况。 - thomasrutter
0

历史上，GIF先出现，然后是JPG，再是PNG。

GIF对于具有相同颜色大面积图像（例如白色背景）非常高效，因为RLL编码可以很好地压缩它。但是，GIF是专利技术（Unisys），并且使用越来越少。颜色深度限制为256种颜色（我想是这样）。

JPG和PNG适用于大多数应用程序，但对于非常简单的图形文件大小将大于GIF。 GIF可以处理透明度和动画。

编辑：您是正确的-专利于2006年10月1日到期。

GIF专利不是几年前就过期了吗？ - Eric Petroelje
它确实有这个问题，但即便如此，GIF 还存在其他问题，并且已经被 PNG 取代。 - Piskvor left the building
完全错误：“JPG和PNG适用于大多数应用程序，但对于非常简单的图形文件将比GIF更大。 GIF可以处理透明度和动画。”老实说，我该从哪里开始呢？好吧，JPEG和PNG并不适用于“大多数应用程序”，文件也不会比GIF“更大”，而且GIF也不是唯一可以处理透明度的格式。 GIF并没有使用“RLL”编码，它使用LZW压缩。正如已经指出的那样，GIF专利已经过期多年了。 - thomasrutter
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接