為什么選擇webp圖片？
WebP比同等質量的JPEG和PNG都要小，一般能減少25%-35%的文件大小，能有效的提升加載性能。
- YouTube自從使用WebP之后，頁面加載速度提升了10%
- Facebook自從使用WebP之后，JPEG的存儲減小了25%-35%，PNG的存儲減小了80%
WebP是一種絕佳的方式來替代JPEG、PNG和GIF。而且WebP同時支持無損和有損壓縮。無損壓縮保證質量不降低，有損壓縮則可以極大減少文件體積，但相應的質量會降低。
把圖片轉換成WebP
一般有兩種方式：cwebp command-line tool 和 Imagemin WebP plugin。Imagemin的插件一般用于構建工具，如webpack、gulp等。cwebp則更適合于一次性的轉換。
在你轉換成WebP的時候，需要考慮圖片質量的問題，可以從0-100選擇，選出一個最佳的質量同時大小也能滿足你的要求。
使用cwebp
用默認配置轉換一個文件
cwebp images/flower.jpg -o images/flower.webp
用50的質量轉換一個文件
cwebp -q 50 images/flower.jpg -o images/flower.webp
轉換一個目錄下的所有文件
for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
使用Imagemin
這個插件可以根據(jù)你自己的產(chǎn)品的構建工具來使用，以下是webpack的用法：
const ImageminWebP = require('imagemin-webp');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CopyWebpackPlugin([{
from: './images/**/**',
to: './images/[name].webp'
}]),
new ImageminPlugin({
// imagemin-webp docs: https://github.com/imagemin/imagemin-webp
plugins: [ImageminWebP({quality: 50})]
})
]
};
如果你沒有使用構建工具，可以使用Nodejs來執(zhí)行，如以下代碼，可以將 images 目錄的圖片全部轉換成webp，并放入 compressed_iamges 目錄：
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
imagemin(['images/*'], {
destination: 'compressed_images',
plugins: [imageminWebp({quality: 50})]
}).then(() => {
console.log('Done!');
});
HTML中使用WebP圖片
如果不考慮兼容性，可以不用再往下看了。一般情況下，我們針對支持WebP的瀏覽器展示W(wǎng)ebP，不支持的會用JPEG或者PNG展示。
使用前：
<img src="flower.jpg" alt="">
使用后：
<picture>
<source type="image/webp" srcset="flower.webp">
<source type="image/jpeg" srcset="flower.jpg">
<img src="flower.jpg" alt="">
</picture>
請注意這些標簽的使用 <picture>、<source>、<img>，以及他們的順序。
picture
<picture> 標簽提供了一個容器，里面會放若干個 <source> 和一個 <img>。
source
<source> 標簽定義了一個媒體源。
從上往下，瀏覽器會檢測哪個格式是支持展示的，如果都不支持，則會fallback到 <img> 標簽。
CSS中使用WebP圖片
可能你會想嘗試一下方法：
#picture {
background-image: url(picture.webp);
background-image: url(picture.jpg);
}
實際上是無效的，CSS是層疊樣式，后者會覆蓋前者，不會如預期一樣不支持WebP，則自動fallback到JPEG。
常用的做法是檢測WebP是否支持，相關檢測代碼可以參考：https://modernizr.com/download。
該腳本如果檢測出來支持，則會在 html 標簽上加一個 webp 的類，如果不支持，則會加 no-webp，實際使用的時候可以如下：
.elementWithBackgroundImage {
background-image: url("image.jpg");
}
.webp .elementWithBackgroundImage{
background-image: url("image.webp");
}
總結
一般項目中我們還是盡可能的少用圖片，經(jīng)常使用Imagemin或者cwebp來做一次性的轉換，只有當你的項目圖片經(jīng)常變動，而且數(shù)量很多的情況下，才會考慮集成到構建工具中，而且還面臨著CSS的使用的fallback的問題，集成進入構建腳本還需要額外開發(fā)插件，可能不止一個，具體的后面的文章我們會在做探討。
