在PC端的时候,往往在处理图片的时候我们更多的是通过ctrl+shift+alt+s的方式来保存图片以达到优化的目的:
这种方式往往需要调节品质,设置相对而言比较麻烦,对于png24的图片更是束手无策!因为需要找出一个可行批量和高效的图片压缩方式,下面用一个简单的实例来进行我们方案的测试!
一、demo实例原图片的大小
二、图片压缩的方案
1.基于grunt-contrib-imagemin的构建工具压缩
提高批量压缩,第一个想到的必然是基于grunt构建工具的的图片压缩,这样可以很多好的和css和js压缩一起工作,配置gruntfile.js
module.exports = function (grunt) { grunt.initConfig({ imagemin: { weiGame:{ options: { optimizationLevel:7 // png图片优化水平,3是默认值,取值区间0-7 }, files: [ { expand: true, // 开启动态扩展 src: ["*.{png,jpg,gif}"], // 要出处理的文件格式(images下的所有png,jpg,gif) dest: "imagemin/" // 输出目录(直接覆盖原图) } ] } } }) require('load-grunt-tasks')(grunt); grunt.registerTask('default',["imagemin:weiGame"]); }
我们在Git Bash上执行我们的任务grunt,结果如下:
提示两种图片总共被压缩的大小,才5.04kb,似乎没有达到预期的要求?下面我们采用第二种方式来佐证到底压缩彻不彻底!
2.通过在线工具tinyPng(https://tinypng.com/)压缩
tinypng提供了在线上传压缩的功能,我们将图片进行了压缩,结果如下图:
优点: 压缩比例大,tinypng压缩节省了86kb,在图片不失真的情况下压缩的比例真是杠杠的,远超过grunt的方式!
缺点: 要一个上传,一个个下载,操作相当麻烦(当然可以通过安装photoshop插件的形式快速进行压缩)
3.通过google pagespeed 提供的工具:jpegtran.exe的方式来压缩图片:
$ jpegtran -copy none -progressive bg.jpg bg1.jpg; $ jpegtran -copy none -progressive icon_prize1.png icon_prize2.png;
结果如下图:
很明显压缩的结果还是没有达到预期的要求,不是理想的选择!到这里方案已经是有了,只是没有比较便捷的方式,所以需要寻找另外一种方式来觉得问题。这个时候发现了一个很好的photoshop的插件(TinyPNG 1.1.42 For PSCC 2014,也就是第四种方式:
4.通过photoshop的插件的相识来完成图片的压缩:
很明显压缩的结果还是没有达到预期的要求,不是理想的选择!到这里方案已经是有了,但是没有比较便捷的方式,这时候我们需要寻找另外一种方式来觉得问题。这个时候发现了一个很好的photoshop的插件(TinyPNG 1.1.42 For PSCC 2014)比较理想的方式,操作如下:
步骤一:下载安装包:TinyPNG 1.1.42 For PSCC 2014.rar
步骤二:解压下载安装包,里面有三个文件夹:1.Registry Entry(点击里面的PhothoshopCC.reg安装),2.Install(点击里面的TinyPNG-v1.1.exe)安装,3.For PSCC 2014,将里面的文件拷贝到你photoshop的安装目录,如果安装成功会看到:
步骤三:通过上面“tinyPng Image Processor"打开文件夹,就可以将文件夹中的png图片压缩,并保存在源文件当中!
这种方式很明显只需要选中文件夹就可以,很方便,但是遗憾的是只能压缩png的图片,对jpg的图片,没有提供压缩!所以如果要快速压缩的时候,建议通过方案四将png格式的图片压缩,然后通过tinyPng 的官网上传jpg格式的图片进行压缩,以达到图片格式最小化!这算比较笨,但对于未使用构建工具前端人员和设计师算是最好的方式了!
能想到的就这些方式,如果有更好的方案和工具,欢迎留言!