图片优化的那些工具

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

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

相关推荐

  • Axure RP 8.0软件安装教程

    软件链接:Axure RP 8(32、64位)链接:https://pan.baidu.com/s/1pMubgLl密码:0nb1软件介绍Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。安装教程共享软件库1.点击历史信息,查看更多内容2.长按右...

    2018-03-04
  • 总结了一套完整的设计分析思路

    本文主要是根据个人在各个大大小小的项目中总结而来的一套做设计分析的参考思路,应用于常规的项目场景基本是够用了。“需求是业务方的几句话描述,只能管中窥象的了解他们一些零零碎碎的想法,没理解到本质需求就开始画界面,然后不断的随着他们想法的转产而反复被动修改交互稿…”
    “PM已经画好完整的demo,交互看着似乎能做的只是根据demo做细节优化和完善,做着做着就迷茫了,设计的价值到底在哪呢?”“在公司中作为职能部门的UED团队,需要站在用户的角度思辨业务,通过服务内部客户进而服务我们的最终用户,用设计专业帮助业务成功,与业务一起成长”。Tips: 跟需求方沟通挖掘需求,最重要的注意点是需求方对我们来说是快速了解行业现状和市场需求的绝佳伙伴,所以要更多的聊这些,而不要很快就陷入页面具体细节的讨论。(如果需求方主动要说,可引导至挖掘背后目的是什么,为啥要这样做,具体表现形式可以后面在细化页面时再考虑)某家居用品商要制造一款家用钻孔机,继续往下深挖用户诉求:
    “用户需要的并不是一台钻孔机,他们需要的是墙上有几个孔”
    “用户需要的并不是墙上的几个孔,他们需要的是墙上显示家人照片”
    “用户需要的并不是挂了照片的墙,他们需要的是一个更温馨生动的家”
    ……通过「某策略」,帮助用户实现「某价值」,以完成「价值变现」。

    2017-05-02
  • 如何让头脑风暴更有效率

    头脑风暴法是广泛用于团队的一个产生想法和解决问题的方法。然而,许多头脑风暴活动是有不完美的,最终并不能帮助激发思想上的创新。众所周知,传统的头脑风暴,团体在一起,把想法一个接一个的表达出来,通常这是…

    2014-11-10
  • Force Touch是Apple用于Apple Watch、全新MacBook和13英寸MacBook Pro的一项新的触摸传感技术。

      摘要:Force Touch是Apple用于Apple Watch、全新MacBook和13英寸MacBook Pro的一项新的触摸传感技术。通过它,设备可以感知用户点击力度,再根据力度的不同调出相应的不同功能,让用户和设备能够进行更好的…

    2015-03-18
  • 7个维度,让你在网页设计中讲好故事

    网站能承载多种多样的内容,但无论是哪种内容,通常都会遵循一定的信息架构。在这其中,故事是很特别的一种类型。讲故事,往往能以更叙事、更情感化的方式,将内容传递给用户。一个好的故事,往往始于笔端,但是最终呈现,还是要依靠精巧的设计。那么设计是如何讲好故事的呢?今天的文章,为你分享一下创造故事的7个维度。

    2017-05-05
  • 产品设计不能闭门造车

     用户调研的重要性不言而喻,没有用户调研的产品设计是闭门造车,不能完美解决用户的痛点,自然也不能创造最大的价值,那么用户调研到底应该怎么做呢? 产品不同阶段的诉求之前的文章中,笔者提到过用户体验5要素,…

    2017-03-28
  • 制作UI 设计规范时,你遇到的最大瓶颈是什么?

    上一篇文章是给大家提供一个制作UI设计规范的大体思路,这一篇准备来聊聊我们在具体执行过程中遇到的最大问题、瓶颈是什么!
    此篇文章适读人群:想进阶的初级UI设计师、有追求的初级交互设计师。

    2017-05-12
  • 按键的位置是如何强化用户习惯的?

    当设计师需要向用户展示大量的数据时,总是不可避免要利用到筛选和排序。筛选和排序可以帮助用户缩小他们正在寻找的数据范围。

    2017-05-30
  • Axure RP 8软件和安装教程

    Axure RP 8(64位)下载链接:百度网盘:https://pan.baidu.com/s/1hsfD3Kg提取密码:ivma软件简介:Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。(仅供学习交流使用)安装前须知:1.解压和安装前请关闭...

    2018-04-17
  • 基于任务的导航设计

    对于不同平台导航的交互形式与视觉样式,相信有不少的文章来介绍与总结。本文所介绍的是关于导航规划思路。一个比较小众的领域,基于任务的导航(Task based Navigation)。 目前产品主要使用基于对象的导航和基于…

    2015-11-03