图片优化的那些工具

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

怎么让图片的大小更小?除了选择合适的格式(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

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/1198/

(0)
iouedioued
上一篇 2014-11-06
下一篇 2014-11-06

相关推荐

  • 产品上线了,你咋都不好意思说是你设计的

    对于界面来讲,我们设计师过于关注设计的美观度,而忽略了图片和文字的内容的真实性。而界面内容的真实性相当关键,这往往关乎自己的设计最终能不能高还原度地呈现。

    2017-05-21
  • 如何设计可交互的email,调动用户的参与感?

    Email营销通常与市场推广活动挂钩,是帮助你达到推广目标的最有效途径之一。但如何确保你的营销邮件的内容与品牌紧密相连?这一直是营销人员面临的一个挑战。用来克服这一挑战的战术多如牛毛,而可交互的email正迅速崛起为最具创新性、动态性和最流行的方式,他们让用户深深着迷、参与其中,相关设计师和开发人员都应该引以为豪哦!

    2017-05-17
  • 交互设计师的60日计划第十五天

    今天晚上去上了想上已久的舞蹈课,超级超级开心。说要学舞说了这么久,总是不能兑现。今年的另一个要实现的事情,就是每周坚持学舞蹈吧。 20150813 产品经理的自己提的方案也可能并不是他想要的 很久以前师父和老大…

    交互专题 2015-08-20
  • 浅谈APP交互设计师是一个什么样的职位

    这篇文章算是一篇对APP交互设计师重新阐述的一篇常识文章。希望对哪些想要从事APP交互设计师的小伙伴们有一定的基础认识。
    今天跟大家从下面4个方面来聊聊APP交互设计师到底是一个什么样的职位。

    2017-05-29
  • 别逗了,真正的“用户体验”并不如你们所想

    什么是用户体验?如何评价用户体验的好坏? 在知乎上,俞军说:“我理解的用户体验,是让用户付出最小成本满足需求”。这其实仅仅是在讲“易用性”(usability)。另有位叫做Allen Zhang的大牛说:“个人对用户体验的目标…

    2015-10-10
  • 88个IXDC国际体验大会的PPT干货

    88个IXDC国际体验大会的PPT干货 毫无水分的PPT资料,快来下吧。   下载地址:http://pan.baidu.com/s/1gekWpJd 密码:请在 【艾欧交互设计】公众号里回复:【ixdc】获得密码 ​微信二维码见页面底部

    交互设计 2015-12-16
  • APP设计中便捷的单手操作

    探讨APP的手势操作前,我想先介绍两篇文章来了解用户是如何使用手机的,以及触控屏是如何来感应我们的操作的。 用户是如何使用手机的 Steven Hoober在《How Do Users Really Hold Mobile Devices?》[1]一文中指出,…

    2014-09-07
  • 全面解读!人工智能如何改善五大用户体验?

    点击【阅读原文】,即将IPO独角兽,抓住上市前最后的机会!最近两年人工智能技术在金融、安全、交通、医疗、公共服务和制造业等领域逐渐落地,随着技术的成熟,人工智能将会在更多领域影响人类的生活。以人为本的人工智能设计会变得更加重要,本文会从安全性、效率、易用性、场景化、个性化五个方面阐述人工智能如何改善现有的产品和用户体验,这五个方面存在着各种联系并相互影响。安全性越接近系统底层的技术越影响用户体验,例如手机中毒或者信息被盗都会对用户产生巨...

    2018-05-05
  • 【炫酷动效设计】这就是为什么你的产品需要做动效设计

    随着国际大品牌苹果和谷歌的引领,最近越来越多的国内公司开始关注动效设计了,越来越多的团队已经意识到动效在产品用户体验中的重要性了,更多的射鸡师们也开始投身动效设计领域。 但是说到底,我们到底为什么需要…

    2015-08-13
  • 善用Axure写PRD:产品逻辑的五种呈现方法

    每天一篇好文章,2018年第2期不管是APP、web网站还是pc客户端的软件,流程&页面&交互&逻辑始终是最重要的几环,分享一下我呈现逻辑的几种方法,大部分PM应该也采用过类似的方法。一、直接不写逻辑最开始根本没有写逻辑的概念,只是用交互事件加上基本的页面跳转。当技术童鞋来问的时候,口述给他。经常会被鄙视。二、直接写到页面里开始学乖了,把一些逻辑直接写到页面里。不过很快就发现了弊病,某些逻辑不应该呈现给用户,只能给前后端童鞋看。同时也造...

    2018-03-27