1. PNG 很好,但我无法使用它们,因为它们在 Internet Explorer 中不起作用。
这个几乎完全是错误的。任何类型的 PNG 都可以在 Internet Explorer 中显示,即使是一些非常旧的版本。这里的问题是 PNG-24 的 Alpha 透明度在 IE 6 中不起作用。仅此而已。如果您不需要 Alpha 透明度,则可以在 IE 中使用 PNG 执行任何其他浏览器可以执行的操作。如果您确实需要 Alpha 透明度,即使这样也不是什么大问题,因为有 很多 方法 来 解决 它。
2. PNG 具有最小的文件大小。
当将 GIF 与 PNG-8 进行比较时,PNG-8 通常具有更好的压缩效果。并非总是如此,但通常如此。但是,如果您谈论的是 PNG-24(具有 Alpha 透明度的那些),它们永远不会具有最小的文件大小。事实上,它们通常非常大,并且是页面加载缓慢的罪魁祸首。
3. PNG 具有更好的色彩
同样,这仅是 PNG-24 的属性。PNG-24 具有出色的色彩。PNG-24 甚至具有无损压缩,这意味着您可以反复保存它而不会损失质量!但是,当然,这是以文件大小为代价的。PNG-8 使用相同的颜色索引,并且具有与 GIF 相同的颜色限制。
4. PNG 是全方位最佳格式。
完全错误。三种主要图像格式 JPG、GIF 和 PNG 都仍然在其各自的应用场景中是最佳格式。对于摄影图像,JPG 在文件大小方面仍然无可匹敌。PNG-24 可以复制质量,但文件大小是其几倍。PNG-8 几乎总是优于 GIF,但 PNG 完全无法进行动画,因此任何需要动画的地方,GIF 都是您的格式。
我们有用于动画 PNG 的 apng(http://en.wikipedia.org/wiki/Apng)。它已在 Firefox 3 中实现。
Opera 9.5 也将在网页和皮肤中支持 aPNG。
“但是,如果您谈论的是 PNG-24(具有 Alpha 透明度的那些),它们永远不会具有最小的文件大小。”
错误。 http://phoenity.com/newtedge/gradient_effect/
好的,这很有用!我之前没有意识到透明度问题已经解决了,太好了:o)
每个人都在经历它,就像你一样,设计师生活中的一部分是 .png 及其兼容性
我认为这不是正确的……PNG 实际上是最佳的图像格式……JPG 总是存在一些图像损失。如果您想保留 JPG(纯无损),则图像大小将非常大(即使不像 ING 那么大)。尽管 PNG 图像尺寸很大,但它们仍然为您提供(迄今为止)最佳的质量……
谁使用 PNG-8?从未听说过有人使用它……
APNG 将在 Firefox 和 Opera 中得到支持,但这并不能保证该格式能够站稳脚跟。官方 PNG 小组已经拒绝将其作为官方动画扩展,并且正在评估其他几种格式。
IE6 已支持二进制透明度,IE7 已支持 Alpha 透明度。由于伽马校正,跨所有浏览器获得正确的颜色一致性存在问题。Internet Explorer 会对图像应用伽马校正,而其他浏览器则不会。虽然微软在技术上没有做错任何事,但它偏离了其他浏览器的做法。目前的解决方案是保存没有任何伽马校正信息的 PNG,或者如果您不需要超过 8 位的颜色,则将文件保存为 GIF。
Amit,JPG 更适合照片,而 GIF/PNG 更适合具有大面积纯色区域的图像。对于照片,JPG 将大幅减小文件大小。PNG-8 不是一种特殊的格式。相反,它是一个以 8 位颜色(这是 GIF 可以容纳的最大值)而不是通常的 24 位保存的 PNG。当然,具有更多颜色的文件将大于具有较少颜色的文件。您的评论说明了为什么 PNG 比 GIF 大的这种误解会持续存在。
我认为你太苛刻了。总的来说,我会说 PNG 仍然是最好的格式,优势很大。(而且我主要是在大多数用例中谈论质量与大小之间的权衡)
我甚至不知道那个 APNG 东西,看起来不错。我喜欢它向后兼容,这样不支持的浏览器仍然可以获得“第一帧”图像。我完全支持前向增强。
@Lim Chee Aun:这很有趣!我想在 PNG-24 是文件大小最小的(以及质量最高的)情况下,确实存在一个非常孤立的实例。尽管如此,总的来说,PNG-24 的文件大小都很大。
@Amit:PNG-8 可能是目前使用最广泛的 PNG。当您听到人们说 PNG“比 GIF 文件大小更小”时,他们指的是 PNG-8。
Chris,好文章。
但是,为了说明一个观点而偏离主题,当我开发 Flash 动画时,我总是倾向于使用 PNG 作为图形。即使原始 GIF 文件大小几乎相同,它们似乎也渲染得更快。确实如此,再说一次,这可能仅仅是文件大小。但它很快。
如果您真的不喜欢 PNG,并且认为以 GIF 格式保存图形是浪费,而 GIF 通常使用 24 位,则可以始终对其进行优化。将颜色减少到正在使用的颜色。我通常使用 Photoshop 的“存储为 Web 所用格式”功能来实现此目的。它可以大幅减小 GIF 或 JPEG 的文件大小。但是 JPEG 的情况是,它通常会影响图像的质量。GIF 则不会。您可以减少正在使用的颜色并减小文件大小,同时保持质量不变。
令我惊讶的是,第 2-4 项仍在讨论,并且它的属性似乎不是常识。我的意思是,PNG 已经有 10 多年的历史了,并且在此期间几乎一直被浏览器使用。关于第 1 项,Internet Explorer 6 本可以做得更好……
我仍在等待 jpeg2000 凭借其卓越的压缩和多功能性流行起来。:-)
作为一名 Web 开发人员,我始终在努力以最小的尺寸获得最佳质量的图像。
对于没有太多颜色的图像,PNG-8 是最佳选择。我使用 Adobe/Macromedia 的 Fireworks 制作我的 Web 图像,它始终创建比 GIF 更小的 PNG-8 文件。我唯一会再次使用 GIF 的情况是动画。
当然,如上所述,对于色彩丰富的图像(例如照片),JPEG 是最佳选择,因为 PNG-24 或 32 太大了。
Mindblogger,Fireworks 仅保存正在使用的颜色(或者您可以进一步减少颜色,并尝试使用比实际使用的颜色更少的颜色)。它可以对 GIF 和 PNG-8 执行此操作。对于 JPEG,您不能只删除颜色,而必须使用百分比指定质量。无论如何,Photoshop 和 Fireworks 来自同一家公司,但如果您创建大量 Web 图形,在我看来,Fireworks 比 Photoshop 更好。
Lim Chee Aun,渐变效果竞赛有点作弊,因为图像实际上并没有包含那么多颜色。将获奖图像保存为具有精确调色板的 PNG-8 显示图像实际上包含 256 种颜色,因此即使它保存为 PNG-24,它实际上也没有使用它可以存储的所有颜色。有趣的是,将其保存为 PNG-8 会生成一个比 PNG-24 略大的文件,这令人惊讶……无论如何,我完全同意 PNG 是没有太多颜色的图像的最佳格式。
@Chris:它并不完全孤立。不知何故,对于图像,尤其是具有简单渐变/线条/条纹的图像,PNG-24 可以生成非常小的文件大小。这种视觉装饰在当今的网站中非常常见,因此如果他们意识到这一点,他们实际上可以使用 PNG-24。
@Chris:您说 PNG 24 的唯一问题是 IE 6 在透明度方面存在问题,但这并不是唯一的问题。
Internet Explorer 在颜色渲染方面存在差异,例如
>> http://untitled-document.info/tests/ie_png/
如果看到一个小方块,则存在问题,因为图像和背景颜色相同。
我记得我在某个地方读到 Photoshop 会生成很大的 PNG-24 文件,因为它会嵌入很多不需要的东西。
您可以在 http://stylizedweb.com/2007/12/30/png-transparency-issues/ 上查看一些 PNG 的解决方案。
这篇帖子的标题很棒!
Lim Chee Aun 关于 24 位 PNG 有时比 8 位 PNG 小的说法是正确的。这是因为 8 位文件必须保存调色板以及位图图像数据,而在 24 位文件中,颜色和位图数据是组合的。对于只有几种颜色的图像,24 位通常更小。我刚刚写了一篇关于优化 Web 上 PNG 的文章,其中包含此观察结果
http://www.friskdesign.com/blog/2008/03/19/optimizing-png-for-the-web/
很棒的文章,感谢分享,Matthew。
为了避免错误,PNG-24 可以使用或不使用 alpha 通道(透明度),如果选择在 PNG 图像中使用不透明度级别,则为每个像素写入 24 位颜色 (3×8) 和 8 位透明度 > 因此您有一个具有 255 个透明度级别的 32 位 PNG。
请停止“讨论 PNG-24(具有 alpha 透明度的那些)”,这是错误的……
PNG-8 透明度也存在……(没有 alpha 级别,完全透明或完全不透明)
此致。
哇,我还以为是我太吹毛求疵了。:-) 当然,Twiny,你是对的,尽管我认为现在大多数讨论 PNG 的人都知道这些区别。
真的很棒。谢谢
PNG-8 Alpha 透明度 - http://blog.brenelz.com/2009/01/27/png-8-alpha-transparency-screencast/