頁面加載性能之使用WebP圖片

爲何選擇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來執行，如如下代碼，能夠將 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的問題，集成進入構建腳本還須要額外開發插件，可能不止一個，具體的後面的文章咱們會在作探討。

參考

• https://web.dev/serve-images-...
• https://css-tricks.com/using-...