我应该使用什么图像类型？ GIF，JPG还是PNG？

Question

我正在尝试为自己创建一个个人主页，以了解有关网页设计（JavaScript，使用Photo Shop等）的更多信息。我打算在左边有一个图形菜单，在顶部有一个横幅，还有一个“照片”部分，在那里我可以显示我拍摄的各种照片的照片。

但是，当我查看其他类似的网站时，我看到一些使用GIF，有些使用JPG，有些甚至使用PNG。这些之间有什么区别吗？我应该使用GIF用于网站上使用的图形图像和JPG用于我的照片吗？我应该制作所有PNG吗？

---

完全重复：

• PNG vs. GIF vs. JPEG vs. SVG - When best to use?
• Website Image Formats: Choosing the right format for the right task.
• Which format for small website images? GIF or PNG?

Answer 1

解释它的XKCD风格漫画：

http://lbrandy.com/blog/2008/10/my-first-and-last-webcomic/

Answer 2

在以下情况下应使用

PNG ：

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

在以下情况下应使用

JPEG ：

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

GIF 应该是：

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

尽管有相反的说法，但PNG在大多数方面都优于GIF。除了动画之外，PNG还能够实现GIF的每种图像模式，并且当使用相同的图像模式时，与LZW相比，PNG具有更好的压缩效果，因为它具有更好的DEFLATE算法。 PNG还能够提供GIF无法做到的其他模式，例如24位颜色和Alpha透明度，但这是您需要注意的地方：如果您忘记转换为调色板模式，您的PNG图像可能会以24位颜色保存这将占用更多空间。

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

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

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

PNG还有其他模式，例如调色板颜色和Alpha透明度。像这样的模式无法在Photoshop中创建，但其他应用程序可以创建它们。

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

Answer 3

将JPG用于照片，将PNG用于照片以外的所有内容。 GIF实际上并不是一个非常好的格式，PNG可以在大多数应用程序中完全替换它的压缩和质量，但有时会出现兼容性问题，不确定这些问题是否已在所有当前的webbrowsers中解决。基本上所有东西都可以读取GIF，所以当它非常有用时。

Answer 4

对于按钮，图标，徽标使用PNG。仅在需要小动画图像时才使用GIF。

PNG可以完成GIF所能做的一切（除了动画，甚至是APNG中的那个），并且应该几乎总是更小。如果PNG不小于GIF，那么您的软件可能会将其保存得很差 - 寻找PNG优化程序，如PNGOUT和pngnq。

Answer 5

GIF存在问题：

• 最多只支持256种颜色。
• 它使用专利的压缩算法。

但它确实有一个优势：

• 可用于显示动画

JPEG可以具有比PNG / GIF更高的压缩比，但是如上面的卡通所示是有损的。它最适用于压缩瑕疵不明显的图像，例如照片。

将图像组合到纹理中并使用CSS解压缩它们会略微减小尺寸并减少服务器请求的数量。

Answer 6

取决于您想要创建的内容。通常，对于您的Web图形，请使用PNG。对于照片，JPG很好。 24位PNG支持alpha transpancy，所以如果你想使用“真彩色”alpha透明度，这是你唯一的选择。 8位PNG比GIF更好，更小，并且具有与GIF（索引颜色托盘）几乎相同的透明度设置，因此没有理由再使用GIF（除非你正在制作......喘息... GIF动画？）。记住PNG格式是无损压缩，所以看起来压缩的JPG会更好看。要记住的一件事是，在Internet Explorer 6及更低版本中支持PNG可能会很麻烦，但有很多解决方法。

Answer 7

GIF - 无用，小巧但限于256色，并且有一位透明度（透明与否）

JPEG - 更大，不小的色彩限制，有损。最适合拍照。

PNG - 无可靠，更好的透明度（alpha通道），但IE6不能正确支持alpha，只需使用特殊修复（fix here）。

Answer 8

GIF最适合具有大量纯色的图像 - JPEG用于具有大量色彩差异的图像（编辑：谢谢，克莱托斯）。 PNG是一种较新的格式，通常比GIF的JPEG更好 - 特别是对于截图。

请参阅http://www.ou.edu/class/digitalmedia/articles/CompressionMethods_Gif_Jpeg_PNG.html

Answer 9

一般来说，jpeg更适合照片，而gif更适合图形对象，如按钮或渲染字母。 png在这两方面都很好，但是这种讨论往往有点宗教信仰，因为如果你开发一个读取/写入gif或jpeg的程序，而png是免费的，需要支付许可费。

区别主要在于压缩，gif获取较小的按钮文件大小，jpeg用于照片。

我最好的建议是使用所有三种格式提供的不同压缩选项，并亲自查看您想要用于哪种目的。

哦，因为这主要是关于文件大小：看看你是否可以从带宽较低的计算机上测试你的主页。这样你就会感觉如果你需要担心压缩; - ）

Answer 10

历史上，GIF首先在此处，然后是JPG，然后是PNG。

GIF对于具有相同颜色的大区域（例如，白色背景）的图像非常有效，因为RLL编码压缩得很好。然而，GIF是专利技术（Unisys），并且越来越少使用。颜色深度限制为256色（我认为）。

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

编辑：你是对的 - 专利于2006年10月1日到期。