1 min read

Gruntjs 批量无损压缩图片大小

Photoshop 切出的图片,含有多余信息,它们对网页前端并没有用处,反而增加图片大小,所以 Google Web Fundamentals 里建议我们使用工具压缩图片大小,减少用户下载的文件大小。

如果你用 Grunt.js,我们就可以借助它的插件 Grunt-contrib-imagemin 来批量、无损压缩图片大小。

如果你对 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 命令:

Gruntjs 批量压缩图片大小

上图可以看到,图片压缩的比率非常可观。之后再使用 Google PageSpeed 工具检测,就不再提醒我们压缩图片。

报告问题 修订

如果你有自建 https 代理的需求,欢迎尝试 Phantom,一键搭建,方便快捷。查看 demo