Photoshop 切出的图片，无论是 PNG 还是 JPEG/JPG 格式，都含有许多相关信息，又或多余的颜色值，这些信息和颜色值，对网页前端并没有用处，反而增加图片大小，所以 Google Pagespeed 最佳实践建议我们用 jpegtran 或 jpegoptim (仅限 Linux 平台) 对 jpeg/jpg 图片进行无损压缩，如果是 PNG 格式，则使用 OptiPNG 或 PNGOUT 压缩。减小图片大小，就可以减少用户下载的文件大小，加快页面访问速度。
不过上面提到的几个工具都不容易操作。又或者我们可以借助 Yahoo 提供的在线压缩图片工具 Smush.it，但据 Google Pagespeed 报告，smushit 压缩过的图片仍有压缩空间 – 目前我还不知道该听谁的。Google Pagespeed 敢揽瓷器活，当然有金刚钻，如果我们安装有它的浏览器插件，就可以定义优化后的文件保存位置，但这些文件名称很长，需要我们再处理，则 Google 的用意又让人费解了。
jpegtran/jpegoptim/OptiPNG/PNGOUT 当然是理想的压缩工具，只是操作不太方便，又有跨平台问题。但使用 Grunt.js 的话，我们就可以借助它的插件 Grunt-contrib-imagemin，imagemin 封装 jpegtran/OptiPNG 功能，可以批量、无损压缩图片大小。
如果你对 Grunt.js 不了解，可以看我上一篇简单介绍。
安装 imagemin 插件
切换到项目文件夹，
cd projectName
npm install grunt-contrib-imagemin --save-dev
配置压缩图片任务
接下来配置 Gruntfile.js 文件，定义优化图片大小的任务：
/*global module:false*/
module.exports = function (grunt) {
‘use strict‘;
grunt.initConfig({
imagemin: {
/* 压缩图片大小 */
dist: {
options: {
optimizationLevel: 3 //定义 PNG 图片优化水平
},
files: [
{
expand: true,
cwd: ‘img/‘,
src: [‘**/*.{png,jpg,jpeg}‘], // 优化 img 目录下所有 png/jpg/jpeg 图片
dest: ‘img/‘ // 优化后的图片保存位置，覆盖旧图片，并且不作提示
}
]
}
},
});
grunt.loadNpmTasks(‘grunt-contrib-imagemin‘);
grunt.registerTask(‘img‘, [‘imagemin‘]);
};
运行 grunt imagemin 命令：
上图可以看到，图片压缩的比率非常可观。之后再使用 Google PageSpeed 工具检测，就不再提醒我们压缩图片。
转载：http://handyxuefeng.blog.163.com/blog/static/45452172201391415246847/