小型网站图片的格式是啥？ GIF 还是 PNG？ [关闭]

Posted 2023-03-15

【中文标题】小型网站图片的格式是啥？ GIF 还是 PNG？ [关闭]

【英文标题】：Which format for small website images? GIF or PNG? [closed]小型网站图片的格式是什么？ GIF 还是 PNG？ [关闭]

【发布时间】：2010-09-12 01:31:20

【问题描述】：

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

显然，如果需要透明效果，那么 PNG 绝对是最佳选择，对于更大、更具摄影效果的图像，我会使用 JPEG——但对于普通的网络“家具”，您会推荐哪种方式，为什么？这可能只是我正在使用的工具，但 GIF 文件通常似乎比可比较的 PNG 文件要小一些，但使用它们似乎还只是 1987 年。

【问题讨论】：

有用：***.com/q/2336522/199700

【参考方案1】：

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

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

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

但您始终可以尝试同时保存（使用相同的颜色深度），然后看看哪个更小。

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

【参考方案2】：

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

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

【讨论】：

Unisys 的 GIF 专利（US 4,558,302）于 2003 年 6 月到期

【参考方案3】：

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

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

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

【讨论】：

PNG 的基本 IE 错误是它对错误的目标 gamma 进行 gamma 校正。 GIF 不受此约束的唯一原因是 GIF 不提供指定伽玛的方法。为了解决这个问题，让你的图形应用程序在没有伽玛的情况下保存 PNG。另见libpng.org/pub/png/png-gammatest.html

此链接hsivonen.iki.fi/png-gamma 解释说，没有 gamma 的 PNG 在某些浏览器中仍会显示不正确。也许这些浏览器已经过时了，您不必担心它们，但至少每个人都应该意识到这个问题。

我可以想象，在硬件和/或操作系统中具有伽马调整的非 Windows 平台上的某些浏览器可能会根据其规范将 CSS 颜色调整为 sRGB，但会使没有颜色空间信息的 PNG 未调整。因此，应该在 PNG 中指定 sRGB，但我刚刚发现 Firefox 出于某种我无法想象的原因做了自己的事情......

【参考方案4】：

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

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

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

• 二维交错（a 逐行显示的方法）。

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

PNG v's GIF (W3C Guidance) PNG FAQ

【参考方案5】：

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

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

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

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

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

【讨论】：

APNG 支持... Firefox... 看到了吗？那是某事...

【参考方案6】：

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

【参考方案7】：

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

要理解的关键点：

PNG8 和 GIF 是无损的

PNG8 始终可以小于 GIF

除非您需要动画，否则切勿使用 GIF

当然，

将 JPG 用于黑白或全彩色照片图像

对低颜色、线条艺术、屏幕截图类型的图像使用 PNG

【讨论】：

值得指出的是，16x16 或更小的图像将始终具有 256 色或更少，因为它只有 256 像素或更少！

【参考方案8】：

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

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

这可能确实与您使用的编码工具有关。

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

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

这是一个典型的编码错误，并非格式固有的。您可以控制颜色深度并使 PNG 文件变小。请参考***文章中的relevant section。

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

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

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

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

【讨论】：

感谢您的详细回答 - 我自己也经常对此感到疑惑，尤其是“IE 中缺乏 PNG 支持”。

关于文件大小和编码工具，我强烈推荐 PNGOUT (advsys.net/ken/utils.htm) 来压缩 PNG 文件。

很好的答案 - 但您的最后一句话似乎缺少一个单词。希望我可以为你编辑它...

另一个技术原因是你想要 Alpha 通道。

【参考方案9】：

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

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

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

【参考方案10】：

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

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

【参考方案11】：

我通常使用 gif，因为它的大小，但也有 png-8，它也是 256 色。

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

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

【讨论】：

根据我的资料，PNG 通常比相同颜色深度的相同图像的 GIF 小。见warp.povusers.org/grrr/PNGvsGIF

【参考方案12】：

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

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

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

【讨论】：

您的第一句话可能是平均GIF文件小于平均PNG文件的原因，但是您需要将like与like进行比较才能与问题相关。

【参考方案13】：

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

谨慎使用 PNG 透明效果：它们不适用于 IE6。

【讨论】：

不适用于 IE6 限制。有一些变通方法，8bit PNG 不需要任何技巧就可以在那里工作。

【参考方案14】：

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

http://www.cloanto.com/users/mcb/19950127giflzw.html

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

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

【讨论】：

甚至 FSF 和 GNU 项目也在他们的网站上使用了一些 GIF。 GIF 专利问题已解决。

【参考方案15】：

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

【讨论】：

无论哪种方式，这都不是一个真正的论点。

【参考方案16】：

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

我认为使用 gif 没有任何缺点。

【讨论】：

使用 Gif 的缺点？它们可以更大，它们的调色板有限，透明度方案也非常有限。

【参考方案17】：

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

【讨论】：

JPEG 压缩仅适用于类似照片的图片。许多图片根本无法从 JPEG 压缩中获益，这是有损的，并且可以通过（始终无损的）PNG 压缩来缩小。