图片优化的那些工具

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

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

相关推荐

  • 欢迎入会 | 中国工业设计协会用户体验产业分会

    点击上方蓝字关注我们中国工业设计协会用户体验产业分会—  首批会员申请公告  —一、中国工业设计协会用户体验产业分会(以下简称本会)介绍1.  分会简介:本会于2017年11月成立,由浙江大学联合湖南大学等单位联合发起,致力于提供一个专业的国际化的交流与学习平台,向社会推广体验的商业价值2.  分会工作宗旨:1)为体验专业相关的学生和从业人员提供教育、培训、科学研究以及社会服务,提升专业能力和创新思维。2)聚集优质人才和资源,共同打造政...

    2018-03-18
  • 美术丨创意Game可用性微交互设计:视觉空间微交互设计

    文章导言(悄然你的特别吸引了我)有些设计看起来简洁,有些设计看起来杂乱无章;有些设计让您快速找到想要的信息,有些设计却让您置身于迷宫之中;为什么要绞尽脑汁写这些细节上的差异?用户在使用产品时是怎么样的心理活动?这将是我分享的一些个人见解。前言:致敬设计学研书籍作者们,有机会写《创意Game可用性微交互设计》总结。如题我们将进行一场有趣的游戏可用性微交互设计讨论。考虑并不是写一本书来高谈阔论,而交互又无处不在: 版面、颜色、纹理、动画、文...

    2018-02-28
  • 【读书笔记】方寸指间——实战指导手册

    导航设计 标签式:能让用户直观地了解到App的核心功能。根据逻辑和重要性控制在5个以内,通过视觉表现用户的当前位置,页面之间的切换快速又不容易迷失,简单高效。 桌面式:类似于手机桌面各个应用入口的导航方式…

    2015-07-17
  • 我们招人啦:高级UX/UI设计师

    For EN version, clickhere生活在笔驰!想不想为前卫的客户创造出杰出的作品?加入我们紧密团结,具有才华,能吃苦耐劳的大家庭,你将会为不同行业构建最具深刻印象的品牌形象。你将迎接带有刺激和创造性的挑战。你会和一个带有创新思维的团队一起工作,不断地推动自己,让自己继续迈向未知的步伐。有时混乱,但永远是具有想象力的一个过程,我们能够专注于做出一个非凡的设计并将它和乐趣结合到一起。我们需要的高级UX/UI设计师!我们正在寻...

    微信热点 2018-04-05
  • 2015年移动端UI/UX设计风格报告与2016年仍会持续火热的5大UI/UX设计趋势

    概述:随着响应式Web设计的持续升温以及Google移动友好性的提升,2015流行的一些UI/UX设计趋势将会在新的一年里持续升温。本文就来预测下2016年仍会持续火热的5大UI/UX设计趋势。 预测:2016年仍会持续火热的5大UI/…

    2016-01-03
  • 交互设计工作坊探秘 | WTM 2018 实录

    重构购票流程的信息架构假期将至,你打开再熟悉不过的订票网页,輸入出发日期、目的地、人数,选择了最合适时段的火车票,预定、付款,整个过程不超过 3 分钟。关闭网页后,你甚至不会记得支付后的画面到底显示了什么,因为这一切流畅的就像呼吸般的自然。4 月 14 日,我们邀请到了春秋航空的高级交互设计师——程琳琳,带领一群对交互设计有热情的伙伴们,以欧洲铁路局的项目为范本,一起重现购票流程的信息架构,让大家了解这流畅的购票交互设计是通过什么方法一...

    2018-04-28
  • 使用Axure制作出信息化风格的精美简历(提供模板源文件下载)

    最近又到了每年“金三银四”的求职旺季,相信这段时间很多同行朋友们也正在找工作。在求职的过程中简历是非常重要的一块敲门砖,设计精美的简历能帮助你获得更多引起招聘人员注意的机会。如果我们能花点时间从设计感方面来包装一下自己的简历,这样既能体现自己的求职态度,又能展示出自己的专业细节,相信能让大家的简历增色不少,所以今天这篇分享我将教大家如何使用Axure制作出信息化风格的精美简历。从正式分享之前我需要先说明为何要使用Axure来设计简历,而...

    2018-03-24
  • 18清美考研交叉学科交互设计高分学员黎娜经验分享

    Dream Big,Work Hard黎娜本科广州美术学院  工业设计我的一些基本情况:我本科毕业于广州美术学院工业产品设计系。大学期间由服装设计转为产品设计,产品设计主要是偏向于生活家居类小产品。我大概是在去年快毕业的那段时间第一次从考研的同学那里了解到“信息艺术设计交叉学科”,2018年6月底就决定报考这个专业。7月到10月:7月刚刚来北京备考时的状态大概处于仅仅很想考“信息艺术设计”这个专业,但是根本不知道考试内容是什么,更不用说...

    2018-04-17
  • 视觉设计师应该修炼的五个交互设计技能

    现在,所有基于Web进行设计的人都需要对交互设计 原则有一个基本的了解。即使你没有在人机交互、用户体验设计或人性因素等方向的正式学习训练,但只要你了解这些学科的基本原理,依然会大大提高了你设计的成功机会。这一点对视觉设计师尤为明显。大多数视觉设计师都在艺术学校或者在培训机构经过正式或者非正式的训练。

    2017-05-27
  • 交互设计师如何进行风险预判?

    在公司工作,任何职业都不可能单兵作战,协作是永恒的主题,而每一个需求和任务的实现,都是各方通力合作的成果。作为交互设计师,除了做好自己的设计工作之外,还需要花费大量的时间与产品、运营、客户端开发、前端开发、后端开发一起协作和沟通。

    2017-06-04