小网站图片采用哪种格式？ GIF 还是 PNG？
为网站做小图标、标题图形等时，使用GIF还是PNG更好？
显然，如果需要透明效果，那么 PNG 绝对是最佳选择，对于更大、更具摄影性的图像，我会使用 JPEG - 但对于普通的网络“家具”，您会推荐哪种，为什么？ 这可能只是我正在使用的工具的问题，但 GIF 文件通常看起来比类似的 PNG 小一点，但使用它们看起来就像是 1987 年的事。
When doing small icons, header graphics and the like for websites, is it better to use GIFs or PNGs?
Obviously if transparency effects are required, then PNGs are definitely the way to go, and for larger, more photographic images I'd use JPEGs - but for normal web "furniture", which would you recommend and why? It may just be the tools I'm using, but GIF files usually seem to be a bit smaller than a comparible PNG, but using them just seems so 1987.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（17）
我对所有非透明图像使用 jpg。 你可以控制压缩，这是我喜欢的。 我找到了这个网站对两者进行了比较。 jpg 更小，看起来更好。
I use jpg for all non-transparent images. You can control the compression, which I like. I found this web site that compares the two. jpg is smaller and looks better.
由于尺寸的原因，我通常使用 gif，但也有 png-8，它也是 256 色。
如果您需要精美的半透明内容，请使用 png-24。
我通常使用 Photoshop 中的“保存为网页”功能，它可以让您调整文件类型、颜色数量等，并在保存之前查看结果。 当然，我会使用尽可能小的，在我看来仍然很好看的。
I usually use gif's because of the size, but there is also png-8 which is 256 colours as well.
If you need fancy semi-transparent stuff then use png-24.
I usually use the 'save for web' feature in photoshop, which lets you fiddle with filetype, number of colours etc and see the result before you save. Of course I would use the smallest possible which still looks good in my eyes.
一般来说，PNG 永远不会比 GIF 更差，而且往往比 GIF 更好，因为它具有出色的压缩能力。 可能在某些边缘情况下 GIF 稍好一些（因为 PNG 格式的元数据开销可能稍大一些），但这确实不值得担心。
这可能确实是由于您使用的编码工具所致。
/编辑：哇，似乎对 PNG 文件大小有很多误解。 引用马特的话：
这是典型的编码错误，并非格式所固有的。 您可以控制颜色深度并使 PNG 文件尽可能小。 请参阅 Wikipedia 文章中的相关部分。
此外，Chrono 夸大了 MSIE6 中缺乏支持：
那是错误的。 MSIE6 确实支持 PNG 透明度。 它不支持 Alpha 通道（无需一些修改），但这是另一回事，因为 GIF 根本不支持它。
使用 GIF 而不是 PNG 的唯一技术原因是当使用需要动画并且不想依赖其他格式时。
As a general rule, PNG is never worse, and often better than GIF because of superior compression. There might be some edge cases where GIF is slightly better (because the PNG format may have a slightly larger overhead from metadata) but it's really not worth the worry.
That may indeed be due to the encoding tool you use.
/EDIT: Wow, there seem to be a lot of misconceptions about PNG file size. To quote Matt:
This is a typical encoding mistake and not inherent in the format. You can control the colour depth and make the PNG file as small. Please refer to the relevant section in the Wikipedia article.
Also, lacking support in MSIE6 is blown out of proportion by Chrono:
That's wrong. MSIE6 does support PNG transparency. It doesn't support the alpha channel (without a few hacks), though but this is a different matter since GIFs don't have it at all.
The only technical reason to use GIFs instead of PNGs is when use need animation and don't want to rely on other formats.
W3C 提到了 PNG 相对于 GIF 的 3 个优点。
• Alpha 通道（可变
透明度），
• 跨平台伽玛校正
（控制图像亮度）和
色彩校正
• 二维交错（a
渐进显示方法）。
另外，请查看以下资源以获取指导：
The W3C mention 3 advantages of PNG over GIF.
• Alpha channels (variable
transparency),
• Cross-platform gamma correction
(control of image brightness) and
color correction
• Two-dimensional interlacing (a
method of progressive display).
Also, have a look at these resources for guidance:
哇，我真的很惊讶这里的所有错误答案。 当适当优化时，PNG-8 将始终小于 GIF。 只需通过 PngCrush 或任何其他方式运行您的 PNG-8 文件PNG 优化例程。
需要理解的关键事项：
当然，
Wow, I'm really suprised with all the wrong answers here. PNG-8 will always be smaller than GIF when properly optimized. Just run your PNG-8 files through PngCrush or any of the other PNG optimization routines.
The key things to understand:
and of course,
从法律角度来看，使用 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)
The main reason to use PNG over GIF from a legal standpoint is covered here:
http://www.cloanto.com/users/mcb/19950127giflzw.html
The patents have apparently expired as of 2004, but the idea that you can use PNG as open-source over GIF is appealing to many people.
(png open source reference: http://www.linuxtoday.com/news_story.php3?ltsn=1999-09-09-021-04-PS)
使用 PNG 时请注意颜色变化。 此链接提供了一个示例，并包含更多带有进一步说明的链接：
http://www.hanselman .com/blog/GammaCorrectionAndColorCorrectionPNGIsStillTooHard.aspx
GIF 图像不受此问题的影响。
Be careful of color shifts when using PNG. This link gives an example, and contains many more links with further explanation:
http://www.hanselman.com/blog/GammaCorrectionAndColorCorrectionPNGIsStillTooHard.aspx
GIF images are not subject to this problem.
我认为这没有多大区别（客户不在乎）。 我个人会选择 PNG，因为它们是 W3C 标准。
请谨慎对待 PNG 透明效果：它们不适用于 IE6。
I don't think it makes a lot of difference (customers don't care). Personally I would choose PNGs because they are a W3C standard.
Be cautious with the PNG transparency effects: they don't work with IE6.
对于网络上的图像，每种格式都有其优点和缺点。 对于照片类型的图像（即很多很多颜色，没有硬边），请使用 JPEG。
对于图标等，您可以在 PNG 和 GIF 之间进行选择。 GIF 仅限于 256 种颜色。 PNG 的格式可以像 GIF 一样（即 256 色，具有 1 位透明度，可在 IE6 中使用），但对于小图像，它们比 GIF 稍大。 24 位 PNG 同时支持大色域和 alpha 透明度（尽管在 IE6 中这很麻烦）。
PNGS 是您唯一真正明智的选择，例如屏幕截图（即，大量颜色和硬边），就我个人而言，这就是我大部分时间坚持使用的，除非我有 JPEG 的东西更合适（如照片）。
For images on the web, each format has its pros and cons. For photograph-type images (ie lots and lots of colours, no hard edges) use a JPEG.
For icons and the like, you have a choice between PNG and GIF. GIFs are limited to 256 colours. PNGs can be formatted like GIFs (ie 256 colours, with 1-bit transparency that will work in IE6), but for small images they're slightly larger than GIFs. 24-bit PNGs support both a large gamut, and alpha transparency (although it's troublesome in IE6).
PNGS are your only really sensible choice for things like screenshots (ie, both lots of colours and hard edges), and personally, that's what I stick with most of the time, unless I have something for which JPEG is more suitable (like a photo).
索引 PNG（少于 256 色）实际上总是比 gif 小，所以我大部分时间都使用它。
Indexed PNG (less than 256 colors) is actually always smaller than gif, so I use that most of the time.
对于计算机生成的图形（即您自己在 Photoshop、Gimp 等中绘制的图形），JPG 是不可能的，因为它是有损的 - 即您会得到随机的灰色像素。 对于静态图像，PNG 在各方面都更好：更多颜色、可缩放透明度（例如 10% 透明，.gif 只支持 0% 和 100%），但有一个问题是某些版本的 Internet Explorer 不支持 PNG透明度正确，因此您会得到看起来丑陋的平坦不透明背景。 如果您不关心那些 IE 用户，请选择 PNG。
顺便说一句，如果你想要动画，那就选择 GIF。
For computer generated graphics (i.e. drawn by yourself in Photoshop, Gimp, etc.) JPG is out of the question, because it is lossy - i.e. you get random gray pixels. For static images, PNG is better in every way: more colors, scalable transparency (say, 10% transparent, .gif only supports 0% and 100%), but there is a problem that some versions of Internet Explorer don't do PNG transparency correctly, so you get flat non-transparent background that looks ugly. If you don't care about those IE users, go for PNG.
BTW, if you want animations, go for GIF.
PNG 是 GIF 文件的 100% 替代品，并且受到您可能遇到的所有 Web 浏览器的支持。
在非常非常少的情况下，GIF 会更好。 最重要的是动画 - GIF89a 标准支持动画，几乎每个浏览器都支持它，但普通的旧 PNG 格式不支持 - 您需要使用 MNG，而 MNG 的浏览器支持有限。
几乎所有浏览器都支持 PNG 文件中的单位透明度（GIF 格式提供的透明度类型）。 IE6 缺乏对 PNG 的完整 8 位透明度的支持，但在大多数情况下可以通过一点 CSS 魔法来纠正。
如果您的 PNG 文件比同等的 GIF 文件大，几乎可以肯定是因为您的源图像具有超过 256 种颜色。 GIF 文件的索引最大调色板为 256 色，而大多数图形程序中的 PNG 文件默认以 24 位无损格式保存。 如果文件大小比准确的颜色更重要，请将文件另存为 8 位索引 PNG，它应该相当于 GIF 或更好。
可以使用动画帧与不替换标志和多个调色板的组合来“破解”GIF 文件，使其具有超过 256 种颜色，但自从 PNG 出现以来，这种方法实际上已被遗忘。
PNG is a 100% replacement for GIF files and is supported by all web browsers you are likely to encounter.
There are very, very few situations where GIF would be preferable. The most important one is animation--the GIF89a standard supports animation, and virtually every browser supports it, but the plain old PNG format does not--you would need to use MNG for that, which has limited browser support.
Virtually all browsers support single-bit transparency in PNG files (the type of transparency offered by the GIF format). There is a lack of support in IE6 for PNG's full 8-bit transparency, but that can be rectified for most situations by a little CSS magic.
If your PNG files are coming out larger than equivalent GIF files, it is almost certainly because your source image has more than 256 colors. GIF files are indexed to a maximum palette of 256 colors, while PNG files in most graphics programs are saved by default in a 24-bit lossless format. If file size is more important than accurate colors, save the file as an 8-bit indexed PNG and it should be equivalent to GIF or better.
It is possible to "hack" a GIF file to have more than 256 colors using a combination of animation frames with do-not-replace flags and multiple palettes, but this approach has been virtually forgotten about since the advent of PNG.
GIF 的一个主要问题是它是一种受专利保护的格式（编辑：这显然不再正确）。 如果您不关心这一点，请随意使用 GIF。 PNG 比 GIF 具有更大的灵活性，特别是在色彩空间方面，但这种灵活性通常意味着您需要在发布 PNG 之前对其进行“优化”。 网络搜索应该会发现适合您平台的工具。
当然，如果你想要动画，GIF 是唯一的选择，因为 MNG 由于某种原因基本上是不可能的。
A major problem with GIFs are that it is a patent-encumbered format (EDIT: This is apparently no longer true). If you don't care about that, feel free to use GIFs. PNGs have a lot more flexibility over GIFs, particularly in the area of colorspace, but that flexibility often means you'll want to "optimize" the PNGs before publishing them. A web search should uncover tools for your platform for this.
Of course, if you want animation, GIF is the only way to go, since MNG was basically a non-starter for some reason.
“这可能只是我使用的工具的问题，但 GIF 文件通常看起来比类似的 PNG 小一点，但使用它们看起来就像是 1987 年的感觉。”
它可能是你的工具。 来自 PNG FAQ：
“这种现象背后有两个主要原因：比较苹果和橘子（即不比较相同的图像类型），以及使用不好的工具。” 继续...
但是您始终可以尝试同时保存为两者（使用相同的颜色深度），看看哪个颜色更小。
当然，如果您想为您的网站标准化一种图形格式，PNG 可能是最好的选择。
"It may just be the tools I'm using, but GIF files usually seem to be a bit smaller than a comparible PNG, but using them just seems so 1987."
It probably is your tools. From the PNG FAQ:
"There are two main reasons behind this phenomenon: comparing apples and oranges (that is, not comparing the same image types), and using bad tools." continued...
But you could always try saving as both (using the same colour depth) and see which comes out smaller.
Of course, if you want to standardise on one graphic format for your site, PNG is likely to be the best one to use.
就我个人而言，我在图像中经常使用 gif，因为它们在任何地方都适用，显然透明度限制是引导某人使用特定格式的一个关键因素。
我不认为使用 gif 有任何缺点。
Personally I use gif's quite a bit for my images, as they work everywhere, obviously your transparency limitation is one key element that would direct someone towards a specific format.
I don't see any downfalls to using gif's.
如果它们变得更小，并且您无法从使用 PNG 提供的功能（即 alpha 通道透明度和超过 256 种颜色）中获得任何好处，那么我认为您没有理由使用 PNG。
If they get smaller and you have nothing to gain from using the features PNG offers (which is alpha channel transparency and more than 256 colors) then I see no reason why you should use PNG.
gif 文件往往会小一些，因为它们不支持透明度 Alpha 通道（可能还有其他一些原因）。 就我个人而言，我认为尺寸差异并不像以前那样值得担心。 现在大多数人都通过某种宽带来使用网络，所以我怀疑他们会注意到其中的差异。
使用您的操作工具最适合的图像类型可能更重要。
另外，我喜欢将图像放在任何背景上并进行投影工作的能力，这让我更倾向于 png 格式。
gif files will tend to be a little smaller since they don't support a transparency alpha channel (and maybe for some other reasons). Personally, I don't feel the size difference is really worth worrying about nearly as much as it used to. Most people are using the web with some sort of broadband now, so I doubt they will notice a difference.
It's probably more important to use the type of images that your manipulation tools work best with.
Plus, I like the ability to put an image on any background and have a drop shadow work, which points me more towards the png format.