為什么選擇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
這個插件可以根據你自己的產品的構建工具來使用疙教，以下是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的瀏覽器展示WebP作喘，不支持的會用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");
}
總結
一般項目中我們還是盡可能的少用圖片，經常使用Imagemin或者cwebp來做一次性的轉換芯丧，只有當你的項目圖片經常變動芍阎，而且數量很多的情況下，才會考慮集成到構建工具中缨恒，而且還面臨著CSS的使用的fallback的問題能曾，集成進入構建腳本還需要額外開發(fā)插件，可能不止一個肿轨，具體的后面的文章我們會在做探討。
