图片优化的那些工具

标签: 杂谈 | 发表时间:2014-06-23 17:40 | 作者:晓辉
出处:http://ued.ctrip.com/blog

图片作为页面的一个主要因素,它的大小直接影响了页面的加载速度,这一点在移动端尤显突出。

怎么让图片的大小更小?除了选择合适的格式(jpeg、gif、png),我们还可以利用网上的应用(如smushit、tinypng、imagemin、imageOptim)对图片进行压缩。在这里我想给大家介绍一下上述应用主要使用到了哪些命令行工具以及它们的使用方法。

imageoptim

Jpegtran

JPEG的压缩工具有jpegtran和jpegoptim,这两款工具的压缩效果几乎没有区别,在这里我们推荐使用jpegtran,相比后者,jpegtran可以进行progressive编码,使图片渐进式的展现,先显示模糊的图片,再逐步清晰。

推荐命令行参数:

jpegtran –copy none –optimize -progressive -outfile out.jpg in.jpg

想知道这些参数的具体作用,可使用命令“jpegtran –h”了解,下同。

 

Gifsicle

Gif动画可使用gifsicle来优化,它会剥离不同帧中重复的像素来优化gif动画,对于单帧gif我们推荐还是使用png8来替代。

推荐命令行参数:

gifsicle –interlace -O3 –careful –no-comments –no-names –same-delay –same-loopcount –no-warnings -o out.gif in.gif

 

pngcrush 、optipng 、pngout

PNG压缩可分为无损压缩和有损压缩,以上三款可以说是现在比较主流的无损压缩工具了。从ImageOptim的压缩效果可以看出,optipng和pngcrush对于色彩比较单一、大小比较小的图片压缩效果好于pngout,而对于色彩比较丰富、透明渐变的图片来说pngout的压缩比明显更高。另外,经测试,Google的PageSpeed上提供的可压缩比是按照optipng给出的。

imageoptim_1

imageoptim_2

推荐命令行参数:

pngcrush -brute -rem alla -nofilecheck -bail -blacken -reduce -cc in.png out.png

optipng -strip all -quiet -clobber -o3 -i0 in.png -out out.png

pngout -k1 -r -v in.png out.png

 

pngquant 、pngnq

两款PNG的有损压缩工具,基本都能将图片压缩掉40%以上,它们会将PNG转换成alpha透明的PNG8,由于PNG8最多支持256色,所以内容丰富的图片压缩后会看出些许差异,但属于可接受范围内,而纯色图片基本能保持原图的质量。另外,这种alpha透明的PNG8图片在IE6以上及其他标准浏览器可以显示正常的alpha透明度,在IE6中则会忽略掉有alpha透明度的颜色,作为全透明处理(边缘稍有锯齿但影响不大),而不像png32那样alpha透明区域在IE6下显示灰色。

推荐命令行参数:

pngnq –s 1 –d outdir/ in.png

pngquant -s1 –o out.png in.png

PS:pngquant的-s是speed参数,可选值1-10,默认为3,在经过多图测试后发现1的压缩比和效果都是最佳的,其他的参数或多或少存在缺陷,这里推荐选1。

 

总结

如果您已经学会如何使用这些命令行软件对自己的图片进行压缩优化,那么恭喜您,您的图片瘦身成功。如果您觉得命令行一行一行的压缩图片太麻烦,那么除了去使用文章开头所说到的那几款应用外,感兴趣的同学也可以整合它们去开发一套自己的应用,利用php的exec、nodejs的child_process.exec(cmd, [options], callback)等等方法执行shell命令,再配上一些交互,一款好用的图片优化应用就此诞生。最后希望这篇文章对大家有所帮助。

相关 [图片 优化 工具] 推荐:

图片优化的那些工具

- - 携程UED
图片作为页面的一个主要因素,它的大小直接影响了页面的加载速度,这一点在移动端尤显突出. 除了选择合适的格式(jpeg、gif、png),我们还可以利用网上的应用(如smushit、tinypng、imagemin、imageOptim)对图片进行压缩. 在这里我想给大家介绍一下上述应用主要使用到了哪些命令行工具以及它们的使用方法.

Android工具库xUtils1.9.8发布-orm性能优化,图片加载优化...

- - 开源中国社区最新新闻
感谢关注xUitls的网友最近一段时间给予的热心反馈,xUtils近期做了很多细节优化之后,功能和api已经稳定.         1.9.8主要更新内容:.         * orm模块添加列类型转换接口,支持自定义类型字段作为列映射;.         * bitmap模块优化默认参数,取消默认动画,加载更快速.

Android性能优化之实现双缓存的图片异步加载工具(LruCache+SoftReference) - 拿来即用

- - CSDN博客推荐文章
之前在郭大神的博客看到使用LruCache算法实现图片缓存的.这里仿效他的思路,自己也写了一个. 并加入ConcurrentHashMap>去实现二级缓存,因为ConcurrentHashMap是多个锁的线程安全,支持高并发.很适合这种频繁访问读取内存的操作..

Web性能优化之图片优化

- - 极客521 | 极客521
HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过一半的流量和时间都用来下载图片. 从性能优化的角度看,图片也绝对是优化的热点和重点之一,Google PageSpeed或者Yahoo的14条性能优化规则无不把图片优化作为重要的优化手段,本文覆盖了Web图片优化的方方面面,从基本的图片格式选择、到尚未被广泛支持的响应式图片均有所提及.

图片原理与优化

- - TID-财付通设计中心
前言:该文收集了前辈们的一些关于图片优化的技巧,在此收拢到一起,对于各个方法的优化原理做了一些研究,希望能给大家对于图片优化这一块起到抛砖引玉的作用. 提到图片,我们不得不从位图开始说起,位图图像(bitmap),也称为点阵图像或绘制图像,是由称作像素(图片元素)的单个点组成的. 这些点可以进行不同的排列和染色以构成一副图片.

java图片处理工具

- - CSDN博客推荐文章
作者:kuanghongjiang 发表于2015-2-1 15:45:51 原文链接. 阅读:0 评论:0 查看评论.

浅谈图片优化的方法

- - 微博UDC
在网站优化中,如果图片优化得好,不但可以提高页面的加载速度,提升网站的用户体验,而且还可以通过图片优化来节省网站的带宽. 那么作为页面构建工程师应该采用什么方法来优化图片,既能保证UI的还原度,又使图片最精简呢. 下面我就个人经验,来简单介绍一下图片优化的方法,首先我们了解一些图片方面的知识:.   矢量图:缩放、旋转不失真的图像格式,不管你离多近去看都看不到图形的最小单位.

AndroidのBitmap之大图片优化

- - 博客园_首页
不解释大家懂得,在listview 或grid或viewpager等大量大尺寸图片时,会造成OOM. 这里是优化图片内存的一个方法,注释写的很 明确... public Bitmap getBitmapFromNet(final String url,final int width,final int height){//从网络下载图片.

如何处理 Web 图片优化?

- - SegmentFault 最新的文章
未优化的图片是影响网站性能的主要因素之一,尤其会影响初次加载. 取决于图像的分辨率和画质,图片可能占据整个网站流量的 70%.. 生产环境出现未优化的图片并显著影响初次加载速度的现象还是挺常见的. 缺乏经验的开发者通常没有意识到这一潜在问题,也不了解各种优化图片的工具和方法. 本文的目标是介绍优化 web 图片的主要工具和方法.

Kraken.io:网页优化最佳工具

- - TechWeb 新酷网站 RSS阅读
  Kraken Web Optimizer 是一个集图片压缩、ICO图片格式转换、JavaScript 检查等功能于一体的在线网页优化工具. 如果你想优化网站速度、加快网站的开启速度或是减少浏览浪费的话,把图片压缩一下就是会个不错的方法,可达到立竿见 影的效果. 倘若网站使用了不JavaScript、CSS 或 HTML,Kraken.io 也能针对这些程序代码进行优化.