图片优化的那些工具

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

怎么让图片的大小更小?除了选择合适的格式(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-04
  • Axure RP 8 入门手册 – 第6章(三)

    第8节检视功能-元件属性Alice.:小楼大大好!小楼大大帅!我有些小困惑,想请你帮我指点下。可以吗?小楼:你诚实直白的我无法拒绝。Alice.:嘻嘻!我的问题有点多哦。小楼:来嘛!Alice.:我想做个密码输入框,就是输入文字时只能看到圆点那种。帅帅的小楼老师,这个怎么实现呢?小楼:这个是文本框的类型,看来你对这个元件的属性不太了解呀!我给你详细讲解吧!在检视功能的属性面板中有每个元件的属性设置,不同元件的属性会有差别。这里我对各类元...

    2018-04-22
  • 新知 | 在打造用户体验上,连雷军都要向这家企业学习

    在我们之前发布过的一篇文章《小米八周年:雷军揭秘四大成功之道》中提到过,雷军在创建小米时受到了美国零售连锁超市好市多(Costco)的启发,从价值体系上来看,小米与好市多相同,都是希望用户能以可承受得起的价格享用更好的产品。好市多以优质、低价出名,在全球拥有700多个分店。从2006年到2016年,好市多的市值增长了五倍,如今的市值约为670亿美元。好市多亚洲区总裁张嗣汉在2018零售业年会上分享了好市多的运营模式、会员制度,以及管理层...

    2018-05-04
  • 让人最不喜欢的交互设计错误列表,来看看你中枪了没!

    好的交互设计可以区分开有质量的网站和其他普通网站。然而,如果有明显的设计错误,它只会给予你本来想打动的用户以刺激和挫败感。下面是Speckyboy上总结的让人最不喜欢的交互设计错误列表,来看看你中枪了没!1缺…

    2017-08-02
  • 浅谈“效率导向”的交互设计

    作者: 欢童鞋 周二下午,送妈妈上车后,去奈雪点了杯奶盖,坐在面对门口的位置,看着络绎不绝的人流队伍,除了感叹生意好以及好奇心使然查阅奈雪的开店背景之外,不由的思考“效率”在这里的重要性,店员需要高效为…

    交互专题 2017-12-05
  • 酱课程丨交互设计第③期 · 原来交互设计师是这样工作的,和你想的一样吗?

    交互课程第三期来啦!查看前两期点击这里——交互设计第①期 · 这个老师只用一张图,就解决了所有设计专业都会遇到的问题!交互设计第②期 · UI/UX傻傻分不清楚?分分钟带你搞懂交互设计下的六大Job Titles!通过前两期课程,同学们了解了双钻图——一套完整的设计流程指导框架、定义了什么是交互设计、它所涉及到的领域以及与交互设计相关的六大Job titles。现在大家对交互设计已经有了一个大致的理解,设计流程框架也是现成的,下面就要进...

    2018-05-04
  • 产品学习——用户体验要素

    最近看完了这边和产品相关的书籍——《用户体验要素》,读完之后感觉这本书写的挺好。下面做了一些思维导图,做的比较详细,这样就可以当做是读书笔记了。自己的不足:1,读起来的困难是这本书翻译的不是特别好,所以为了理清楚这个本的脉络,还是花费了比预期要久的时间。2,是第一次使用xmind,在一边做思维导图,一边学习使用xmind上面花费了一些时间。3,是专注度还是不够,集中精力的时间太少了,所以做一件事的时间就会拖的太久。第一章:用户体验为什么...

    2018-02-23
  • 让你的设计拥有高转化率的配色知识简明指南

    互补指的是我们视野中色彩和色彩之间相互补足的关系。选择色轮中处于相对位置的色彩,构成的配色 方案令双眼觉得和谐。最常见的互补配色有两种,三元配色和复合配色,我们将稍后探讨。
    对比则可以将不同的元素区分开来,从而降低视觉疲劳,构建出视觉重心和焦点。元素之间的高对比度让文字更容易被识别,引导用户注意到更关键的信息。背景和背景之上文本的色彩选取就是一个非常常见的对比度的问题,我们会随后聊到。
    色彩对于用户的情绪上的感染也是一个重要因素。

    较小的文本应当确保至少和背景之间有4.5:1的对比度比率
    较大的文本(14pt粗体,18pt常规)应当确保和背景之间的对比度超过3:1

    2017-05-22
  • 简单快速的可用性测试

    2014年11月11日   艾欧交互设计-用户体验 导语:可用性测试是改善产品的最佳方式之一,这一点,在内部已经是不争的共识。只是由于用研人手总是不足,所以为了能让各个部门的同事能更快速地展开一些研究和测试的工作…

    2014-11-11
  • 【招募】图书管理员、UI交互设计、手机软件开发,快来报名!!

    ↗点击上方“海淀教堂”关注我们📖海淀教堂为丰富教牧同工的阅读生活,正在建立图书馆,欢迎有图书馆管理或工作经验并有感动的弟兄姊妹积极参与此项事工。报名地点:三楼侍奉室边瑞霞同工 18514656724💻因事工需要,海淀堂网络组现招募UI交互设计,手机软件开发等技术义工,欢迎有相关恩赐的弟兄姊妹咨询报名。报名地点:三楼侍奉室李维萧同工 17600071627欢迎有感动的弟兄姊妹们参与进来!等待您的加入呢!耶稣爱你!名关注这里Address:...

    2018-04-15