Grunt中批量无损压缩图片插件--Grunt-contrib-imagemin
来源:互联网 发布:sql语句建表 列名别名 编辑:程序博客网 时间:2024/05/19 17:26
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 projectNamenpm 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 工具检测,就不再提醒我们压缩图片。
- Grunt中批量无损压缩图片插件--Grunt-contrib-imagemin
- Grunt中批量无损压缩图片插件--Grunt-contrib-imagemin
- Grunt - imagemin图像压缩
- 使用grunt来无损压缩图片
- grunt的grunt-contrib-jshint插件使用
- grunt的grunt-contrib-concat插件使用
- 在RHEL5中安装grunt-contrib-imagemin,并与J2EE集成
- grunt-contrib-requirejs插件合并压缩requirejs管理的Angularjs应用
- Grunt Contrib Watch Example
- grunt压缩
- 一步一步讲解如何安装并执行Grunt-contrib-watch插件
- 解决:grunt-contrib-jshint插件支持es6 syntax的问题
- win7安装grunt-contrib-qunit
- grunt-contrib-connect使用心得
- grunt
- grunt
- Grunt
- Grunt
- C++设计模式之单例模式
- [转] Linux常用C函数-日期时间篇
- Android多任务下载,使用Notification更新进度条
- MFC单例运行三种方式
- 不想当业务员的培训经理不是好的CEO
- Grunt中批量无损压缩图片插件--Grunt-contrib-imagemin
- android4.0强制横屏竖屏
- Bulk copy failed user does not have alter table permission
- [转]Linux常用C函数-内存控制篇
- com学习(五)——实现多接口
- 总结 20 个开发细节
- ubuntu12.20安装 hadoop2.2.0伪分布式
- PREEMPT_RT的未来
- leetcode 15 Single Number II