前端图片压缩调研

sishenhei7 commented 5 years ago

概述

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

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的配置：

pngquant设置压缩图片的品质，建议设置为95-100。
minFileSize设置多大以上的图片才压缩，单位是比特，建议设置为5120，即5k以上的图片才压缩。
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。

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

总结

项目中的图片文件可以分为以下四种：

ps或figma等专业工具导出的jpg图片。导出的时候可以定一个导出图片的品质，然后ui设计师按照这个品质来导出图片。可以不压缩。
ps或figma等专业工具导出的png图片。这种图片在导出的时候不能设置品质，所以需要压缩。
相机或者手机里面拍照的图片。这种图片需要压缩。
svg。使用svgo进行压缩。已经在项目中的ym-svg-sprite插件中支持。

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

ishowman commented 4 years ago

这好像是vue cli 的配置吧？

sishenhei7 commented 4 years ago

这好像是vue cli 的配置吧？

是的，vue-cli 的配置~~ 不过原理是一样的，这里 vue-cli 是通过 chainWebpack 做的~~

sishenhei7 / react-blog