前端图片压缩调研

概述

最近作项目思考了一下前端图片压缩问题，有一些小的心得，记录下来，供之后开发时参考，相信对其余人也有用。下面按优先级列出了前端图片压缩的解决方案。

webpack

如今前端项目都是利用webpack打包，因此我调研了一下在webpack里面压缩图片的解决方案，主要使用基于imagemin插件的imagemin-webpack-plugin插件。

首先安装imagemin-webpack-plugin插件：

npm install imagemin-webpack-plugin

而后在webpack配置中添加以下配置，就能够在项目打包的时候自动压缩图片了。

var ImageminPlugin = require('imagemin-webpack-plugin').default

module.exports = {
  plugins: [
    // Make sure that the plugin is after any plugins that add images
    new ImageminPlugin({
      test: /\.(jpe?g|png|gif|svg)$/i,
      disable: process.env.NODE_ENV !== 'production', // Disable during development
      pngquant: {
        quality: '95-100'
      }
    })
  ]
}

若是使用webpack-chain的话，webpack的配置以下：

const ImageminPlugin = require('imagemin-webpack-plugin').default;

module.exports = {
  chainWebpack: config => {
    config
      .plugin('ImageminPlugin')
      .use(ImageminPlugin, [{
        test: /\.(jpe?g|png|gif|svg)$/i,
        disable: process.env.NODE_ENV !== 'production', // Disable during development
        pngquant: {
          quality: '95-100'
        }
      }]);
  },
};

这个插件灵活性挺高的，能够经过调整quality来调整生成的图片的品质。

这里说一下ImageminPlugin的配置：

1. pngquant设置压缩图片的品质，建议设置为95-100。
2. minFileSize设置多大以上的图片才压缩，单位是比特，建议设置为5120，即5k以上的图片才压缩。
3. test设置那里的图片才压缩，这里的路径是打包后的路径，若是打包后图片存放的文件夹是img，那么这里的值是：/img\/.*\.(jpe?g|png|gif|svg)$/i。

wordpress

咱们官网是用wordpress制做的。我找了一下wordpress上面的图片压缩插件，发现都不能本身调整最终图片的品质。比较主流的有如下几个：

1.Compress JPEG & PNG images。TinyPNG官方发布的wordpress压缩图片插件，支持在后台一键压缩全部wordpress上的图片，可是每一个api key每个月限制最多只能压缩500张，不然就须要付费购买次数了(可是能够申请多个api key来解决这个问题)。
2.Smush。wordpress上活跃安装数超过1百万次。免费，后台界面很是人性化。
3.ShortPixel Image Optimizer。支持lossy,glossy和lossless三种图片压缩模式。

我我的建议使用Compress JPEG & PNG images，毕竟TinyPNG的名声在那里，压缩的图片也不会太差。

另外还能够修改上传图片的大小限制，在functions.php中添加以下代码，这样上传限制就是64M：

@ini_set( 'upload_max_size' , '64M' );
@ini_set( 'post_max_size', '64M');
@ini_set( 'max_execution_time', '300' );

另外一种方法是在根目录新建php.ini文件，里面加入以下代码：

upload_max_filesize = 64M
post_max_size = 64M
max_execution_time = 300

压图工具

若是对wordpress的插件没有本身设置最终图片的品质的功能不满意，那么能够在本地安装客户端来进行图片压缩。这里推荐使用智图。它是 腾讯ISUX 设计团队出品的一款免费压缩工具，有客户端，能够离线使用，支持自定义压缩品质，还能够自动导出为WebP格式。

压图网站

最后能够在一些图片压缩网站上进行在线压缩。好比tinypng、图好快、智图、jpeg io、Optimizilla。这里我推荐tinypng。

不过这种方式强烈不推荐，现在是前端自动化的时代，这种手工压缩的方式已经落伍了。

总结

项目中的图片文件能够分为如下四种：

1. ps或figma等专业工具导出的jpg图片。导出的时候能够定一个导出图片的品质，而后ui设计师按照这个品质来导出图片。能够不压缩。

2. ps或figma等专业工具导出的png图片。这种图片在导出的时候不能设置品质，因此须要压缩。

3. 相机或者手机里面拍照的图片。这种图片须要压缩。

4. svg。使用svgo进行压缩。已经在项目中的ym-svg-sprite插件中支持。

总的来讲，在项目中使用imagemin插件进行图片压缩；在wordpress里面使用插件进行图片压缩，或者安装本地客户端来压缩wordpress里面的图片。