35

在为网站做小图标、标题图形等时，使用 GIF 或 PNG 更好吗？

显然，如果需要透明效果，那么 PNG 肯定是要走的路，对于更大、更多照片的图像，我会使用 JPEG——但对于普通的网络“家具”，你会推荐哪种方式，为什么？它可能只是我正在使用的工具，但 GIF 文件通常似乎比可比较的 PNG 小一些，但使用它们似乎只是 1987 年。

4

17 回答 17

58

作为一般规则，PNG 永远不会比 GIF 更差，而且通常比 GIF 更好，因为它具有出色的压缩率。可能在某些边缘情况下 GIF 稍微好一些（因为 PNG 格式可能会从元数据中产生稍大的开销），但这真的不值得担心。

它可能只是我正在使用的工具，但 GIF 文件通常似乎比可比较的 PNG 小一些

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

/编辑：哇，似乎对 PNG 文件大小有很多误解。引用马特的话：

对于颜色很少的图像，GIF 没有任何问题，而且您已经注意到它们往往更小。

这是典型的编码错误，并非格式固有的。您可以控制颜色深度并使 PNG 文件变小。请参阅维基百科文章中的相关部分。

此外，在 MSIE6 中缺乏支持被 Chrono 夸大了：

如果您需要透明度并且可以使用 GIF，那么我会推荐它们，因为 IE6 支持它们。IE6 在透明 PNG 上表现不佳。

那是错误的。MSIE6确实支持 PNG 透明度。它不支持 alpha 通道（没有一些 hack），但这是另一回事，因为 GIF 根本没有它。

使用 GIF 而不是 PNG的唯一技术原因是当使用需要动画并且不想依赖其他格式时。

于 2008-09-22T16:18:20.967 回答
12

W3C 提到 PNG 优于 GIF 的 3 个优点。

• Alpha 通道（可变透明度），

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

• 二维隔行扫描（一种逐行显示的方法）。

此外，请查看以下资源以获取指导：

于 2008-09-22T16:20:47.810 回答
7

哇，我真的很惊讶这里的所有错误答案。适当优化后，PNG-8 将始终小于 GIF。只需通过PngCrush或任何其他 PNG 优化例程运行您的 PNG-8 文件。

要理解的关键事项：

  • PNG8 和 GIF 是无损的 <= 256 色
  • PNG8 总是可以小于 GIF
  • 除非您需要动画，否则绝不应使用 GIF

而且当然，

  • 将 JPG 用于黑白或全彩色照片图像
  • 将 PNG 用于低颜色、线条艺术、屏幕截图类型的图像
于 2008-09-22T17:13:41.630 回答
5

从法律的角度来看，使用 PNG 而非 GIF 的主要原因如下：

http://www.cloanto.com/users/mcb/199​​50127giflzw.html

这些专利显然已于 2004 年到期，但您可以使用 PNG 作为开源而不是 GIF 的想法吸引了很多人。

（png开源参考：http ://www.linuxtoday.com/news_story.php3?ltsn=1999-09-09-021-04-PS ）

于 2008-09-22T16:17:28.193 回答
3

使用 PNG 时要小心颜色偏移。此链接提供了一个示例，并包含更多链接以及进一步的解释：

http://www.hanselman.com/blog/GammaCorrectionAndColorCorrectionPNGIsStillTooHard.aspx

GIF 图像不受此问题的影响。

于 2008-09-24T17:03:39.750 回答
2

我不认为这有很大的不同（客户不在乎）。我个人会选择 PNG，因为它们是 W3C 标准。

小心 PNG 透明效果：它们不适用于 IE6。

于 2008-09-22T16:18:20.907 回答
2

对于网络上的图像，每种格式都有其优点和缺点。对于照片类型的图像（即很多很多颜色，没有硬边），请使用 JPEG。

对于图标等，您可以在 PNG 和 GIF 之间进行选择。GIF 仅限于 256 种颜色。PNG 可以像 GIF 一样格式化（即 256 种颜色，具有 1 位透明度，适用于 IE6），但对于小图像，它们比 GIF略大。24 位 PNG 支持大色域和 alpha 透明度（尽管在 IE6 中很麻烦）。

PNGS 是您唯一真正明智的选择，例如屏幕截图（即，大量颜色和硬边），而且就个人而言，这是我大部分时间都坚持使用的，除非我有更适合 JPEG 的东西（比如照片）。

于 2008-09-22T16:22:31.237 回答
2

索引 PNG（少于 256 种颜色）实际上总是比 gif 小，所以我大部分时间都使用它。

于 2008-09-22T17:20:09.383 回答
1

GIF 的一个主要问题是它是一种受专利保护的格式（编辑：这显然不再正确）。如果您不关心这一点，请随意使用 GIF。PNG 比 GIF 具有更大的灵活性，尤其是在色彩空间方面，但这种灵活性通常意味着您需要在发布 PNG 之前对其进行“优化”。网络搜索应该为您的平台发现工具。

当然，如果你想要动画，GIF 是唯一的选择，因为 MNG 出于某种原因基本上无法启动。

于 2008-09-22T16:19:34.240 回答
1

对于计算机生成的图形（即自己在 Photoshop、Gimp 等中绘制），JPG 是不可能的，因为它是有损的 - 即你会得到随机的灰色像素。对于静态图像，PNG 在各方面都更好：更多颜色、可缩放的透明度（例如，10% 透明，.gif 仅支持 0% 和 100%），但存在一些 Internet Explorer 版本不支持 PNG 的问题透明度正确，所以你得到看起来很难看的平坦的非透明背景。如果您不关心那些 IE 用户，请选择 PNG。

顺便说一句，如果您想要动画，请选择 GIF。

于 2008-09-22T16:22:11.583 回答
1

PNG 是 GIF 文件的 100% 替代品，您可能会遇到的所有网络浏览器都支持 PNG。

在极少数情况下，GIF 更可取。最重要的是动画——GIF89a 标准支持动画，几乎所有浏览器都支持它，但普通的旧 PNG 格式不支持——你需要使用 MNG，它对浏览器的支持有限。

几乎所有浏览器都支持 PNG 文件中的单位透明度（GIF 格式提供的透明度类型）。IE6 中缺乏对 PNG 的全 8 位透明度的支持，但在大多数情况下，可以通过一点 CSS 魔法来纠正这种情况。

如果你的 PNG 文件比同等的 GIF 文件大，那几乎可以肯定是因为你的源图像有超过 256 种颜色。GIF 文件索引到最多 256 种颜色的调色板，而大多数图形程序中的 PNG 文件默认以 24 位无损格式保存。如果文件大小比准确的颜色更重要，请将文件保存为 8 位索引 PNG，它应该相当于 GIF 或更好。

使用带有不替换标志的动画帧和多个调色板的组合，可以“破解”一个 GIF 文件，使其具有超过 256 种颜色，但自从 PNG 出现以来，这种方法实际上已被遗忘。

于 2008-09-22T18:05:50.880 回答
1

“它可能只是我正在使用的工具，但 GIF 文件通常似乎比可比较的 PNG 文件小一点，但使用它们似乎只是 1987 年。”

它可能是你的工具。来自 PNG 常见问题解答：

“这种现象背后有两个主要原因：比较苹果和橙子（即不比较相同的图像类型），以及使用不良工具。” 继续...

但是你总是可以尝试同时保存（使用相同的颜色深度），看看哪个更小。

当然，如果您想为您的网站标准化一种图形格式，PNG 可能是最好的一种。

于 2009-10-25T22:26:17.920 回答
0

就我个人而言，我在我的图像中使用了相当多的 gif，因为它们在任何地方都可以使用，显然你的透明度限制是一个关键因素，它将引导某人使用特定的格式。

我没有看到使用 gif 的任何缺点。

于 2008-09-22T16:17:01.983 回答
0

如果它们变得更小并且您无法从使用 PNG 提供的功能（即 alpha 通道透明度和超过 256 种颜色）中获得任何好处，那么我认为您没有理由使用 PNG。

于 2008-09-22T16:17:24.060 回答
0

gif 文件往往会小一些，因为它们不支持透明 alpha 通道（可能出于其他一些原因）。就个人而言，我不觉得尺寸差异真的像过去那样值得担心。大多数人现在都在使用某种宽带上网，所以我怀疑他们会注意到不同之处。

使用最适合您的操作工具的图像类型可能更重要。

另外，我喜欢将图像放在任何背景上并进行投影工作的能力，这让我更倾向于 png 格式。

于 2008-09-22T16:20:28.980 回答
0

由于尺寸的原因，我通常使用 gif，但也有 256 色的 png-8。

如果您需要花哨的半透明东西，请使用 png-24。

我通常使用 Photoshop 中的“保存为网络”功能，它可以让您在保存之前调整文件类型、颜色数量等并查看结果。当然，我会尽可能使用最小的，但在我眼中仍然看起来不错。

于 2008-09-22T16:20:55.157 回答
-5

我将 jpg 用于所有非透明图像。您可以控制我喜欢的压缩。我找到了比较两者的网站。jpg 更小，看起来更好。

于 2008-09-22T16:16:49.067 回答