2009 - 10 - 10

有趣的PNG优化(更多的技巧)

Published by at 15:37 under 前端开发

原文地址:http://www.smashingmagazine.com/2009/07/25/png-optimization-guide-more-clever-techniques/

作者:Sergey Chikuyonok

译文地址:http://zanbu.blogbus.com/logs/43337794.html

接着上一篇我们继续分享Sergey Chikuyonok带来的PNG优化技巧,虽然在原文的评论中也看到一些人认为何必花这么多时间去做这样的优化工作,我还是那句话做为一个页面重构人 员,图片优化是与我们息息相关的,业界的最新知识我们必须掌握,至于在项目中怎么去应用要靠个人判断。

灰度

Photoshop 不能保存灰度模式的 PNG 文件,所以你得在保存黑白图像后再使用 OptiPNG,代码如下:

optipng -o5 bw-image.png

灰度图像占用的空间远小于 RGB 图像,因为每个像素只用一个字节来表示,而不是三个:


PNG-24(Photoshop → 真彩色),8167字节


PNG-24(Photoshop + OptiPNG → 灰度),6132字节

在保存图像为 PNG 文件之前,将其设置为灰度模式(图像 → 模式 → 灰度)非常重要,尤其是半透明图像(参见 Dirty transparency 的方法) 。

减少颜色

这个方法可以作为色调分离的替代方案。色调分离会严重改变图像的色彩,如果你要将图像嵌在网站背景中的话,这根本不可接受。这种方法能让你控制颜色更加自如,但也是限制在256色以内。

这个方法主要是从半透明图像中提取图像信息(即删除透明度),将其转换为索引颜色再应用到原始蒙版中。减少颜色数量利于文件的有效压缩。

1.在 Photoshop 中打开并且复制原始图像(图像 → 复制)。


63KB

2.从复制的图像中删除透明(滤镜 → Photo Wiz → Remove Transparency) :

3.设置图像模式为索引颜色(图像 → 模式 → 索引颜色)。在新对话窗口中输入如下设置:

  • 颜色:190 ,
  • 仿色:扩散,
  • 数量:80%。

4.图像模式设置回 RGB 颜色,并复制图层到原始文件中。将复制的图层对齐,并创建剪贴蒙版。现在保存为 PNG-24 文件:


51KB

如你所见,做些简单的步骤就可以节省下11KB,而且还没有任何质量损失。甚至这种方法还有一个好处:使用 OptiPNG 时能够获得更高的压缩率。而对于这张图像,它的大小被从51KB减小到33KB,压缩了36%。你可以保存为 Web 格式的文件并应用 Influence mask 来减低大小,而不必把图像转为索引颜色模式。

但是这种方法并不等同于在 Fireworks 中的调整 PNG-8 的透明度。在多数情况下,即使颜色数减少了,但仍会超过256色,所以你必须保存图片为 PNG-24,而非 PNG-8。要记住,不透明的红色和透明50%的红色是完全不同的两种颜色。

降低细节

这项技术对于优化阴影、倒影、发光等非常好用。记得在 Dirty transparency 中讲到,真彩色图像中的每个像素都用了四个字节来描述:RGBA。最后一个控制像素的透明度。对于 Alpha 值太低的像素(即像素只是勉强可见),你就可以替换 RGB 数据以取得更好的压缩效果。让我们试试吧。

1.再次在 Photoshop 中打开复古 iPod


63KB

2.iPod 下方的倒影就是非常好的优化对象。Ctrl+单击 或 ⌘+点击 图层面板中的缩略图创建选区。到通道面板从选区创建新的通道:

3.我们必须选中那些勉强可见的像素。反相该通道(图像 → 调整 → 反相),然后打开阈值对话框(图像 → 调整 → 阈值) 。设置阈值为170就足够了:

4.这样我们就得到了只包括勉强可见的像素的蒙版。Ctrl+单击 或 ⌘+单击 通道创建选区。返回图层面板,选择图像图层,打开滤镜 → 杂色 → 中间值。这个滤镜将平滑选区中的像素,也就是说更利于压缩。设置半径为5:

现在存储图像为 Web 所用格式,PNG-24,文件大小已经从63KB减小为59KB了。你可以调整阈值和中间值,在提高压缩率与保存更多细节间平衡。

其它 PNG 的使用和优化技巧

1.每次优化都必须先彻底分析图像。再选用最合适的优化技术。

2.自主创新。以这些技术为基础,研究你自己的优化方法。

3.许多人认为,对于颜色较少的图像,PNG-8 总比 PNG-24 更适用。但是他们错了。有时候,PNG-24 反而更小:


PNG-8,833字节


PNG-24,369字节

在这张图像中,PNG-8 额外占用了空间:3个字节是用来描述颜色板中的像素,另外再用1个字节来描述图像数据流中的像素,而 PNG-24 总共只需要3个字节来描述。因此,如果图像颜色数较低,也没有透明,那么就该测试下 PNG-8 和 PNG-24 哪个更小。

4.如果您使用的是旧版本的 Photoshop(低于 CS3 ),你可能会发现,图像在图像编辑器与在网页浏览器中看起来不一样。这是因为 PNG 文件中存有伽玛值,可以控制图像的伽玛校正。(关于伽玛的相关内容,可以参考这篇文章——译注)你可以放心地将其删除,用 TweakPNG (仅 Windows 下)或 smush.it 都能做到。

5.有一种“特殊的” PNG 图像格式,可以在支持半透明的情况下,以索引颜色的 PNG-8 保存。Photoshop 不能保存这种图像(Fireworks 则可以),但可以先在 Photoshop 中编辑,然后再用 OptiPNG 转换。

OptiPNG 默认会将少于256色的真彩色图像(24位)转换成8位色。这么做的话,可以先应用“减少颜色”和“降低细节”技术,再“猜测”图像的颜色数。不过这样非常费时。PNGGNQ 工具可以将真彩色图像转为256色,但这样你就不能完全掌控图像了。

你必须减少颜色数到256色以下,包括半透明像素在内。这种格式之所以“特别”,因为它在 IE6 下会:


IE6


其他浏览器

你也看到了,IE6 只显示不透明像素。这种格式的好处是你可以使用标准的 <img> 标签,或把图片作为背景(即不使用巨耗资源的 AlphaImageLoader CSS 滤镜),但代价是 IE6下 的视觉效果非常糟糕。

6.不要使用“另存为”保存应用在网页上的 PNG 图像,而应该使用“存储为 Web 所用格式”。默认情况下,Photoshop 会将预览连同图像一起保存,这样文件就会稍大一些。

2 responses so far

2 Responses to “有趣的PNG优化(更多的技巧)”

  1. quilts shamson 20 9月 2011 at 10:22

    有意思,收藏了!

Trackback URI | Comments RSS

评论