前端圖片壓縮調研

概述

最近作項目思考了一下前端圖片壓縮問題，有一些小的心得，記錄下來，供之後開發時參考，相信對其餘人也有用。下面按優先級列出了前端圖片壓縮的解決方案。

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裏面的圖片。