PNG图片极限压缩

之前面对应用体积压缩的问题时,找到了目前比较好的PNG压缩方法ImageAlpha+ImageOptim。这种方法一个不便之处在于ImageAlpha是一个单张图片处理工具,而且需要手动保存图片。图片较多时非常费力。如果有工具能够将两个工具结合到一起,提供批量处理的能力,将会很有帮助。ImageOptim作者也考虑过添加有损压缩功能,项目中也包含了pngquant,只是8个月过去了还没结果。ImageOptim-CLI是一个集成了这两个工具和JPEGmini的命令行工具,利用AppleScript实现对图形界面程序的操纵。用起来发现有时候会出现大图未被压缩的问题,同时命令行的交互相比图形界面在易用性上还是有差距。因此我花了些时间将ImageAlpha的有损压缩功能集成到ImageOptim中,可以对PNG图片实现微小失真下高压缩率。并且利用ImageOptim-CLI的对比方法比较了这些工具的压缩效率。

ImageAlpha

ImageAlpha是一个Mac OS X下的图形化有损图片压缩工具,内置了pngquantpngnq-s9,Blurizer和posterizer四种压缩工具。这些工具减少PNG文件大小并保留透明度通道。ImageAlpha采用PyObjC编写,但是作者对这种方式已经累觉不爱。使用一段时间后的经验是内置的几种压缩工具看起来pngquant最有效的,压缩时颜色数采用256可以在难以分辨出质量损失的情况下大幅压缩图片体积。虽然对于颜色数较少的图片可以通过减少颜色数来进一步压缩体积,但这种方式依赖人工并不能实现自动化。

pngquant将24位或32位的RGBA PNG图转换成8位PNG图并保留透明度通道。这样得到的图兼容所有的现代浏览器,并且可以通过一个兼容性设置在IE6上实现较好的降级。优化后文件相比24/32位通常可以缩小40-70%的体积。

ImageOptim

ImageOptim是一款非常优秀的无损图片压缩工具,相信大多数iOS开发者都知道它。它通过优化压缩参数,移除无用的文件元数据和不必要的颜色配置来实现图片的无损压缩。它集成了最好的压缩工具,包括PNGOUTZopfli, Pngcrush, AdvPNGOptiPNGJpegOptimJPEGrescanJpegtranGifsicle。除了压缩效率高,它还支持命令行、充分利用多核、批量处理和拖拽操作方式。

关于其算法可以参考项目的issue讨论。基本方法是利用用多个工具压缩图片,选取体积最小的替换原图。如果所有方法压缩后变大则保留原图(比如已经被其压缩过一次的图片可能再压变大)。作者期望压缩算法按照一定顺序进行,前一次如果压缩有效,后一次基于前一次的压缩结果进行。实际情况下几种工具大多基于原图进行压缩,这可能是一个值得以后改进的地方。

ImageOptim with pngquant

ImageOptim with pngquant是我对ImageOptim改进加入pngquant的版本。对项目的改动包括:

  • 对pngcrush版本降级来避免编译错误。
  • 设置页面和菜单加入pngquant复选框,可以选择开启或关闭pngquant。
  • 处理图片时,如果pngquant工具勾选,则先使用pngquant预处理。

你可以自行编译或者下载编译好的应用

需要注意的是压缩之前做好版本控制或者备份,因为压缩是有损的并且会修改原文件,可能会变得失真严重。所以我一般是在把版本控制下的项目里的图片拖进工具,提交之前在SourceTree中预览一下压缩前后的图片,以防失真严重。虽然目前为止这样的压缩都几乎不会感受到品质的损失,但是还是小心为上。另外用ImageOptim压缩有个特点,就是压缩之后再次压缩体积可能反而变大,所以如果做iOS开发,需要将Xcode编译设置中的PNG压缩关掉,可以参考ImageOptim上关于Xcode的文章。另外如果要在IE下使用,那么需要修改运行pngquant的参数。如果有同学遇到这样的需求请联系我,我再来支持这个功能。

压缩工具对比

ImageOptim-CLI项目的gh-pages分支里面提供了测试压缩工具效果的方法。需要注意的是失真的计算依赖于ImageMagick,需要先安装它。 对于几种压缩工具的对比参见http://jamiemason.github.io/ImageOptim-CLI/

工具对比的使用方法参加项目的README。我对项目做了一些修改,添加了我改进的ImageOptim with pngquant和宗心制作的ImageOptim两项。结果参见压缩工具PNG图对比结果。作者列出的ImageAlpha & ImageOptim、宗心的版本和我改进版本原理一致,都是使用pngquant预处理,可能由于参数或者压缩算法版本不同导致结果不尽相同。我改进版本对于图片压缩稍稍领先。

Next

  • PNG压缩目前没有更好的方法了,有空的时候研究一下WebP,看看能不能让图片体积变得更小。
  • jpeg-archive是JPEGmini的一个免费替代品,尝试加入它来压缩JPEG图片。

Further Reading

PNG that works

介绍了PNG的几种类型、浏览器兼容性和一些工具,总结下来:

  • PNG在IE4后可用,使用GIF是在浪费带宽。
  • 使用256色的PNG。
  • 避免使用24位PNG,pngquant可以帮到你。
  • 使用一个PNG优化器来得到更小的文件并避免陷阱。

Lossy PNG

如果对PNG的有损压缩感兴趣,那么可以阅读Lossy PNG一文。这篇文章介绍了有损PNG的原理。作为无损图片格式创造出来的PNG图片可以通过Lossy averaging filter,PNG8和Posterization实现有损压缩。PNG相比JPEG是否更小取决于图片。JPEG通常体积更小,除了有尖锐边缘(比如文本)或者包含透明度(JPEG不支持)的图片。优化后的有损PNG仍然比有损的JPEG-XR/WebP/JPEG-2K大一点,但优势在于可以被所有浏览器和操作系统支持。

Kornel Lesiński

最后膜拜一下Kornel Lesiński,上面提到的几篇文章和工具ImageAlphaImageOptimpngquant等都是他的作品。

Homepage

ImageOptim with pngquant

编译好的应用可供下载。

Stastics

2015-02-16 ~ 2015-02-19

共计4个commit。

时间: 2024-11-08 18:26:07

PNG图片极限压缩的相关文章

html-c# 提取微信文章中的图片是WEBP格式,如何转成JPG格式以便能够正常显示?

问题描述 c# 提取微信文章中的图片是WEBP格式,如何转成JPG格式以便能够正常显示? 根据微信文章地址,提取到了微信文章的HTML源文件,但图片是WEBP格式,并防盗链. 请问,如何通过C#方法,把WEBP转成JPG格式用于保存在本地以便可以正常浏览? 提取到的微信图片的地址如下: http://mmbiz.qpic.cn/mmbiz/Ek7ZheM28KXya0WfIFv58aNZEBb3YSWX9iaMJHLhuz7o5xNia68MItJfDya947ibSX1HVNpy9V3iaJr

在jsp中怎么给文字加背景图片啊

问题描述 在jsp中怎么给文字加背景图片啊 动态生成的菜单 代码如下 function startParentNode(text){ //alert(text); if(""站址管理"" == text){ document.write('<table border=""0"" cellpadding=""1"" cellspacing=""0"&qu

修改Win8系统图片缺省打开方式

Win8系统中缺省采用新界面的照片应用打开图片,也就是说,即使是在Win8的传统桌面以及资源管理器中双击打开图片文件,也会自动跳转到Win8界面的照片应用中,如果有的朋友觉得不习惯,想要修改图片的缺省打开方式,方法也很简单. 在Win8资源管理器中用鼠标右键点击图片文件,从右键菜单中选择"打开方式-选择默认程序". 图示:在Win8中设置图片查看默认程序 弹出的菜单中会列出当前的一些相关程序,点选自己喜欢的程序名称即可.比如大家熟悉的Windows照片查看器.

PhotoShop打造唯美清新的风景桌面壁纸图片教程

教程将给大家讲解如何用普通风景照片制作养眼的屏幕背景. 先看一下最终效果: 1.载入风景照片,并复制产生新层. 在制作照片时我总有个习惯,我自认为是个好习惯.观察照片将对后面的作品产生什么影响,在这个照片中左边的滚石在制作完时 会影响作品的美观,这里要最大限度的做出调整.使用"滤镜>模糊>高斯模糊"如下设置: 继续复制一个层,用调用"橡皮擦"使用柔角,轻轻的在下图所示区域涂抹 在复制层,并将不透明度设置为55% 分类: PS图片处理

PS通道将图片处理为反转片负冲照片特效

反转胶片经过负冲得到的照片色彩艳丽,反差偏大,景物的红.蓝.黄三色特别夸张.反转片负冲比负片负冲在色彩方面更具表现力,其色调的夸张表现是彩色负片不及的,但在层次表现方面,反转负冲又逊色于负片负冲.反转负冲主要适用于人像摄影和部分风光照片,这两种拍摄题材在反转片负冲的表现下,反差强烈,主体突出,色彩艳丽,使照片具有了独特的魅力. 我们没有反转片,也难以实现负冲,但是我们可以用Photoshop的特效处理来模仿反转负冲的效果,其中我们会大量用到通道. 1.在Photoshop中打开一幅图片.在通道控

Photoshop打造柔美的暗调红褐色秋季美女图片

  素材图片主色也比较暗,调色的时候可以先把主色转为中性色,然后用曲线等增加暖色,再在高光区域增加一点高光,暗部增加一点冷色即可. 原图 最终效果 1.打开素材图片,创建可选颜色调整图层,对绿色进行调整,参数及效果如下图.这一步把图片中的绿色转为黄绿色. <图1> <图2> 2.创建可选颜色调整图层,对黄色,绿色进行调整,参数设置如图3,4,效果如图5.这一步给图片增加黄褐色. <图3> <图4> <图5> 3.创建色相/饱和度调整图层,对全图.

Photoshop打造甜美的青红色秋季外景美女图片

  素材图片以黄绿色为主,调色的时候需要把颜色稍微区分一下,把绿色转为淡青色,黄色转为橙红色,再把整体调柔和,人物肤色调红润即可. 原图 最终效果 1.打开素材图片,创建可选颜色调整图层,对黄色,绿色进行调整,参数设置如图1,2,效果如图3.这一步主要把图片中的绿色转为青绿色. <图1> <图2> <图3> 2.创建可选颜色调整图层,对黄.绿,白进行调整,参数设置如图4 - 6,效果如图7.这一步把图片中的黄色转为橙黄色,绿色转为青绿色. <图4> <

Photoshop打造甜美的粉红色秋季美女图片

  粉红色图片调色比较简单,过程:先微调一下颜色层次,然后直接用调色工具把主色转为红色,再慢慢把主色调淡,局部增加一点补色即可. 原图 最终效果 1.打开素材图片,创建可选颜色调整图层,对黄.绿,白进行调整,参数设置如图1 - 3,效果如图4.这一步主要把图片中的黄色调淡一点. <图1> <图2> <图3> <图4> 2.按Ctrl + J 把当前可选颜色调整图层复制一层,不透明度改为:20%,效果如下图. <图5> 3.创建色相/饱和度调整图层

Photoshop打造唯美的韩系青蓝色草地美女图片

素材图片主色为绿色,调色的时候可以把绿色直接转为青绿色或青蓝色,然后在高光区域增加一点淡蓝色,暗部增加一点暗蓝色即可. 原图 最终效果 1.打开素材图片,创建可选颜色调整图层,对绿色,白色进行调整,参数设置如图1,2,效果如图3.这一步主要把图片中的绿色转为青绿色. <图1> <图2> <图3> 2.按Ctrl + J 把当前可选颜色调整图层复制一层,不透明度改为:30%,效果如下图. <图4> 3.创建色相/饱和度调整图层,对黄色,绿色进行调整,参数及效果