图片优化的那些工具

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

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

相关推荐

  • 产品经理和交互设计师两个职位到底是什么关系啊?

    产品经理不一定要从交互设计师开始做起的,产品经理其实对之前做什么职位要求并不严格,因为它更看重一个综合能力,例如做开发的如果做了产品经理,在代码层就会比较有优势,在做产品的时候这一部分可能就会把握的…

    交互设计WiKi 2015-01-25
  • 网易考拉海购APP产品体验报告(可下载)

    干货分享:网易考拉海购APP产品体验报告,33张幻灯片解析产品体验

    2016-08-23
  • 交互设计 | 如何创作一本足够打动考官的作品集

    近年交互设计大热,但交互设计是否如大家所见所想仅是网页及APP设计,申请交互设计艺术留学的同学们又该如何创作帮助自己跨入名校大门的作品集?今天,汉艺国际(H·Art)为大家带来《如何创作一本打动考官的作品集》系列第九期,与大家分享交互设计作品集的创作方法(求职作品集可同理借鉴创作思维)。关于交互设计必须要强调的事儿①——交互设计不仅仅是网页和APP▼交互设计并不是一个单纯研究电子产品用户界面交互的学科。 交互设计包括但不限于用户界面设计...

    2018-04-06
  • 聊天的未来不是人工智能 ,及时交互才是关键

    作为Kik首席执行官,对于即将到来的聊天机器人革命,我思考了很长时间。一年半前,我们率先推出了一个基本版聊天机器人平台,之后,数百万Kik用户和这个机器人进行了对话。其他消息应用(比如Telegram和Slack)也在开发自己的聊天机器人,此外有传言称,Facebook将会在四月12日举办的f8大会上为Messenger推出自主开发的机器人平台。可能是有史以来第一次,聊天机器人能实现你和你周围世界的即时互动。最近,我亲身经历过的一件事,可能最好说明这一切。我的所有操作如下
    打开聊天应用 > 扫码> 输入“2”> 输入“百威”> 选择卡号。搞定!这种即时交互,只有聊天机器人能够做到。你不需要下载App应用,也不需要创建新账号,还有最重要的,你不用学习了解一款新应用里的操作界面了!只需扫码、聊天就能满足需求。这种体验,就像是我在手机上按了一个按键,三分钟之后一辆Uber出现在我面前。如今,科技行业喜欢把它称为O2O模式——在一款App里预订到实体产品或服务。而现在,你甚至不再需要一款App应用,只需用聊天的方式,就能满足自己的日常生活需要。

    2017-05-26
  • 交互设计 | “综合类&艺术类”院校申请侧重点指南

    回复【交互】,获得专业老师一对一专业指导随着现今数字智能等高科技的发展,交互设计成为近些年众多艺术留学生的热门首选专业。但热门并不代表很多同学都对交互设计有所了解,比如,根据向汉艺咨询的学生情况分析,90% 的同学都分不清什么是到底什么是交互,只是很表面的认为交互就是各种“APP”、“UI设计”或者VR/AR。实际上,即使国外最顶级的院校,你也找不到一所专门设立“APP”的专业,“UI设计”严格上来说只能算是“平面设计”,而设立VR/A...

    2018-04-21
  • Sketchelp | 画笔是设计师的思考工具

    作为公众平台的第一篇推送~这不是一则成立宣言,而是一篇老友记。五年ACCD手绘教学实战+三年工业设计考研方法传授,期间无数沉淀,我们想用一种更纯粹的方式去记录。于是,Sketchelp这个名字诞生了。Sketchelp,顾名思义,秉持着助人的心态,提供国外知名设计学院ACCD扎实的手绘观念,结合设计师多年在造型上的实战经验,用浅显易懂、循序渐进的方式带给大众关于设计与手绘的知识。在此基础上,我们将根据行业需求及未来趋势,持续不断地更新及...

    2018-05-04
  • 【免费试听】成都UI-UE交互设计免费试听课了解一下!

    德阳中公教育官方微信长按关注,了解更多资讯。周一见!周一见!周一见!没错下周一!成都UI-UE交互设计免费试听课开课啦!与其宅在家里浪费时间不如来体验一下UI设计前五天免费试学4月16日--4月20号机会有限,先到先到得哦!UI-UE交互设计是什么?UI-UE交互设计就是指对产品的人机交互、操作逻辑、界面美观的整体设计!为什么要学习UI-UE?人才需求旺盛,成IT行业职位新宠人才缺口大,行业势头发展迅猛虽然UI这么好,但是不仅对人才的需...

    2018-04-11
  • 【译文】你瞅啥?文案也是一种设计力量

        做事,不能只讲求实际运用,有的时候,也是需要加入一些纸上谈兵的环节的,毕竟,在理论指导下的实践才不是盲目的。 通常,一些科技类企业无法保证其网页每一个单独界面、广告业和交互页面上的文案都有专人负责…

    交互专题 2017-08-07
  • 为你的App增加WiFi认证检测,让用户体验更加丝滑

    前言前段时间在上海坐地铁时连接了花生地铁WIFI,打开QQ音乐开始听歌,QQ音乐居然给了我一个"WIFI认证提醒"的弹窗,点击认证就跳转到了花生地铁WIFI的认证页,之后顺利联网成功,体验非常爽。作为一名iOS开发,不禁思考这个是怎么做到的呢?忘记WIFI重新连接后,打开手机里各个应用轮番测试一遍,发现QQ音乐、QQ、QQ空间三个应用都做了比较好的WIFI认证提示:成功提示.png而其它的大应用如微信、手淘、支付宝、钉钉、美团、点评、爱...

    2018-02-07
  • 浅谈微信应用交互设计

    微信应用相信大家都不陌生,比如前段时间风靡朋友圈的神经猫,就创造了三天过亿访问量的神话,开发一款好玩有趣的微信应用,通过微信朋友圈的自发传播,达到品牌和产品的有效推广,是当下很多企业都在尝试的,但事…

    2017-08-02