快速业务通道

PNG格式图片优化技巧(网页设计师必须)

作者 佚名技术 来源 平面设计 浏览 发布时间 2012-06-06
ldquo;线性过滤”。

1.色调分离

色调分离的优化方法已经广为人知。在Photoshop中打开样例图片,点击图层面板中的”创建新的填充或调整图层图标”,并选择色调分离:

PNG格式图片优化技巧(网页设计师必须)

选择尽可能小的数值(通常40就够了)并保存图片:

PNG格式图片优化技巧(网页设计师必须)
原图:84K

PNG格式图片优化技巧(网页设计师必须)
压缩后:53K

优化原理:有效的减少色彩数,合并相似的颜色,创建出色调区域,更好的执行“线性过滤”,得到高压缩率。

这种方法有一定的局限性,尤其是优化的图片与 html 背景融合的情况下须慎用(蓝色为 html 背景)。

PNG格式图片优化技巧(网页设计师必须)

PNG格式图片优化技巧(网页设计师必须)

2.多余的透明

看看下面的图片:

PNG格式图片优化技巧(网页设计师必须)
75K

PNG格式图片优化技巧(网页设计师必须)
30K

两张图片都是用 Photoshop 导出的,而且没有经过任何优化。即使对比图中的每个像素,你都不会发现它们之间存在任何区别。但是为什么前者居然是后者的2.5倍大?

在探寻奥秘之前,你必须安装一个“Remove Transparency”的 Photoshop 插件才可以看到隐藏的细节。

在 Photoshop 中打开上面的两张图片,选择 Filer -> Photo Wiz -> Remove Trasparency。现在,你就可以看到保存在图像中的真实像素信息了:

PNG格式图片优化技巧(网页设计师必须)

PNG格式图片优化技巧(网页设计师必须)

这是怎么回事?其实很简单。带alpha通道的真彩色图像每个像素都用了4个字节来表示:RGBA。最后一个是alpha通道,控制该像素透明度:值为0则完全透明,255则完全不透明。这意味着每一个像素(任何RGB值)只要alpha值设为0就可以完全隐藏。但是这些RGB数据仍然存在,而且它不利于png编码器对数据流进行有效的封装和编码。因此,我们必须在导出图像前删除这些隐藏数据(例如上图中填充的黑色)。下面是一个比较便捷的方法:

  1. 1.在Photoshop中打开上面例子中第一张图片;
  2. 2.Ctrl+单击(Mac系统中为 ?+单击)图层面板中的缩略图,建立选区 -> 单击选择栏目 -> 选中反向。

    PNG格式图片优化技巧(网页设计师必须)

  3. 3.切换到快速蒙版模式,按Q键:

    PNG格式图片优化技巧(网页设计师必须)

  4. 4.我们已经建立了一个半透明图像的蒙版,但我们只需要完全透明的图像。图像 -> 调整 -> 阈值,并将阈值色阶滑到最右端,从而使选区完全透明:

    PNG格式图片优化技巧(网页设计师必须)

  5. 5.退出快速蒙版模式(按Q键),并用黑色填充选区:

    PNG格式图片优化技巧(网页设计师必须)

  6. 6.再次反选(选择 -> 反向),点击图层面板的“添加蒙版”图标,添加蒙版。

对于上述这些操作我们只须了解即可,因为png二次压缩工具内已经内置了该项操作。

3.透明分离

有时候因为图片中存在一些半透明像素,你不得不保存一个“重量级”的PNG-24文件。如果将此类图像一分为二,一部分是不透明像素,另一部分则为半透明,然后各以适当格式保存。比如你可以用 PNG-24 格式保存半透明像素,而不透明像素则用 PNG-8 甚至 JPEG 格式保存。这样操作下来在实际应用中你将会节省很大的图片流量。看一下实际案例:

PNG格式图片优化技巧(网页设计师必须)
PNG24 62K

  1. 1.在图层面板中 Ctrl+单击(或 ?+单击)图像缩略图建立选区;

    PNG格式图片优化技巧(网页设计师必须)

  2. 2.在通道面板中选择“将选区存储为通道”;

    PNG格式图片优化技巧(网页设计师必须)

  3. 3.取消(Ctrl+D 或 ?+D)选区,选择新建的通道,然后打开阈值(图像 -> 调整 -> 阈值)。将滑块尽量向右拖动;

    PNG格式图片优化技巧(网页设计师必须)

  4. 4.我们已经为不透明的像素创建了蒙版。现在利用这个蒙版来分离原始图层。Ctrl+单击(或 ?+单击)alpha1通道,转到图层面板,选择原始图层层,打开图层 -> 新建 -> 通过剪切的图层。这样我们就分离出了不透明和半透明像素。 现在你需要将这两个文件分别存储为不同的文件格式:不透明像素保存为 PNG-8,半透明像素保存为 PNG-24。针对半透明像素图层你还可以使用色调分离技术让文件变得更小。

    PNG格式图片优化技巧(网页设计师必须)
    PNG-8 17KB

    PNG格式图片优化技巧(网页设计师必须)PNG-24 色调分离(色阶=35) 6KB

最终对比结果:

PNG格式图片优化技巧(网页设计师必须)
原图:63K


优化后:23KB

优化后的图片大小几乎只有原图的1/3,在原来的基础上能够节省2/3的流量。但是这种方法有一个明显的缺点:将一个图片分成两个图片,增加了

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号