一次有意义的网站图片压缩之旅

      在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格式的图片进行压缩，以达到图片格式最小化！这算比较笨，但对于未使用构建工具前端人员和设计师算是最好的方式了！

      能想到的就这些方式，如果有更好的方案和工具，欢迎留言！