概述
最近做項目思考了一下前端圖片壓縮問題，有一些小的心得，記錄下來，供以后開發時參考，相信對其他人也有用。下面按優先級列出了前端圖片壓縮的解決方案。
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里面的圖片。