从论坛转来的关于PNG图片

来自：不名一格  -  让 PNG-8图像在网页中完美演绎

 

-----------

 

 

网页前端设计到今天已经比较成熟，我们现在不会再去比较GIF和PNG孰对孰错，一种惯性会让大家优先选择PNG。W3C组织制定了PNG的规范 Portable Network Graphics，有兴趣的同学可以深入了解。

下面来说说我们常用的PNG-8。网页设计时，对于减少网页中图像数据大小，降低带宽，我们已逐渐使用8位PNG代替GIF，但是我们还缺以下几步就更加完美了：

一、避免PNG 在IE下的色差问题附解决方案：

IE下PNG色差主要是由于 浏览器对于PNG属性中Gamma项的解释不同。具体表现如图：

问题详细描述： CSS/PNG Gamma Consistency
这里能找到很详细的测试页面———— Browser Gamma-Consistency Test
测试结果———— CSS/PNG Gamma Consistency Test Results

最简单的解决方法是使用一些PNG属性检测的软件，将PNG图像中gamma属性删掉即可解决 PNG检测工具：TweakPNG，
解决办法：Fixing the PNG Color Problem in IE。

其实这个问题在我们使用PS CS3后的版本后已经解决，即将“颜色设置”中RGB设置为：sRGB IEC61966-2.1。并且在另存为Web格式时，弹出对话框中默认勾选了“转化为sRGB”，另存的图片中已经丢掉了gAMA chunk这项属性，所以大可放心。

二、压缩PNG，去掉不必要的数据块(chunk)

从任何 一个对PNG介绍的地方，我们可以找到如下资料：

关键数据块中有4个标准数据块：
* 文件头数据块IHDR(header chunk)：包含有图像基本信息，作为第一个数据块出现并只出现一次。
* 调色板数据块PLTE(palette chunk)：必须放在图像数据块之前。
* 图像数据块IDAT(image data chunk)：存储实际图像数据。PNG数据允许包含多个连续的图像数据块。
* 图像结束数据IEND(image trailer chunk)：放在文件尾部，表示PNG数据流结束。
参考资料：维基：Portable Network Graphics

通过TweakPNG对我们用PS存储的PNG图像进行检查，发现其中有“tExt Chunk，tRNS Chunk”两项，如下图：

我们已经知道标准数据块必须的四个chunk之后，tExt、tRNS 完全可以优化去除，看看去掉之后图片大小变化

三、使用PNG压缩软件优化PNG图像数据大小

推荐使用： PNG Gauntlet 或 PNG Monster

这两个软件的介绍就不罗嗦了。直接看压缩图标后的效果：

压缩效果是比较明显的。
<!--more-->
你可以通过下面链接直接获取工具：

Download PNGGauntlet (ZIP 526 KBytes)
Download PNGMonster (RAR 456 KBytes)

总之，如何选择图像的存储方式完全在于页面中图像的实际应用。不要太过于计较文件大小；当然在页面访问量特别大时，减少一比特对于带宽的节省是显而易见的，所以具体情况具体分析，比较时间成本会随之增加。