站點優化之 WebP 實戰

singsong發表於2019-02-28

✏️最新內容請以github上的為準❗️

其他文章

在搭建 blog 過程中，使用 lighthouse 審查站點。在效能項上提示Serve images in next-gen formats優化建議。

Image formats like JPEG 2000, JPEG XR, and webp often provide better compression than PNG or JPEG, which means faster downloads and less data consumption.Learn more

JPEG 2000, JPEG XR, 和 WebP 與傳統的 JPEG、PNG 相比具有高壓縮比、高質量的特點。這讓圖片載入更快，頻寬消耗更少。當前瀏覽器對 JPEG 2000, JPEG XR, 和 WebP 的支援情況：

WebP：Chrome、Oprea、UC、QQ。其中 Firefox 新版已支援，Safari 已開始嘗試支援。
JPEG 2000：Safari
JPEG XR：IE

結合瀏覽器的支援情況，最終選擇支援 WebP 來優化：

支援有損和無失真壓縮
支援動畫
開源
技術支援團隊是 Google
更多關於 WebP

如何支援 WebP

支援 WebP 有兩種方式：

客戶端處理，這種處理方式需要提前準備好 WebP 圖片。如何將圖片轉換為 WebP 格式

使用 js 檢測是否支援 WebP。

// check_webp_feature:
//   'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
//   'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {
  var kTestImages = {
    lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
    lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
    alpha:
      "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
    animation:
      "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
  };
  var img = new Image();
  img.onload = function() {
    var result = img.width > 0 && img.height > 0;
    callback(feature, result);
  };
  img.onerror = function() {
    callback(feature, false);
  };
  img.src = "data:image/webp;base64," + kTestImages[feature];
}
複製程式碼

使用 HTML5 和 CSS3 特性支援檢測庫: Modernizr 。Modernizr.webp，Modernizr.webp.lossless，Modernizr.webp.alpha 和 Modernizr.webp.animation。
使用 <picture> 元素

<picture>
    <source type="image/webp" srcset="demo.webp">
    <source type="image/png" media="demo.png">
    <img src="demo.png" alt="demo">
</picture>
複製程式碼

服務端處理。相比客戶端處理，在服務端處理更加靈活。因為它可以通過內容型別協商，能提前知道客戶端是否支援 WebP（請求頭中Accept欄位）。如果支援就優先響應 Web 格式圖片，否則就響應請求圖片。
- Deploying New Image Formats on the Web

對比兩種處理方式，通過服務端來支援 WebP 具有如下優勢:

提前知道客戶端是否支援 WebP。處理更靈活，更可靠。而客戶端還需要根據是否支援 WebP，對連結做額外的替換處理。
動態支援 WebP。如果支援 WebP，檢視本地是否有對應 WebP 圖片，如果沒有動態生成響應。

服務端動態支援 WebP

服務端要動態支援 WebP，可以由代理伺服器 Nginx，或 Backend 來完成。

singsong：圖片處理邏輯最好交給下游 Backend 來完成，NGINX 就負責轉發即可。當然也有自動處理圖片 nginx ：ngx_pagespeed

Nginx 處理

確保mime.types中有 WebP。因為如果沒有 WebP 型別，WebP 圖片會作為application/octet-stream 輸出。

image/webp  webp;
複製程式碼

獲取請求頭 Accept 欄位中的 webp

map $http_accept $webp_suffix {
  default   "";
  "~*webp"  ".webp";
}
複製程式碼

這裡使用 map(更多參考ngx_http_map_module)定義了一個$webp_suffix變數，如果 WebP 存在，$webp_suffix值為".webp"，否則為空字串。

輸出圖片
- 檢視是否存在.webp的檔案，如果存在就直接輸出。
- 檢視是否存在請求檔案，如果存在就直接輸出。
- 如果上述檔案都不存在，就響應404。

    try_files $uri$webp_suffix $uri =404;
複製程式碼

這裡還可以將響應操作反代理給 Backend：

    if ($http_accept ~* "webp")    { set $webp_accept "true"; }

    location ~ ^/imgs.*\.(png|jpe?g)$ {
      # Pass WebP support header to backend
      proxy_set_header  WebP  $webp_accept;
      proxy_pass http://127.0.0.1:8080;
    }
複製程式碼

完整程式碼：

worker_processes 1;

events {
  worker_connections 1024;
}

http {
  include mime.types;
  default_type  application/octet-stream;

  #
  # < regular Nginx configuration here >
  #

  # For a hands-on explanation of using Accept negotiation, see:
  # http://www.igvita.com/2013/05/01/deploying-webp-via-accept-content-negotiation/

  # For an explanation of how to use maps for that, see:
  # http://www.lazutkin.com/blog/2014/02/23/serve-files-with-nginx-conditionally/

  map $http_accept $webp_suffix {
    "~*webp"  ".webp";
  }
  map $msie $cache_control {
      "1"     "private";
  }
  map $msie $vary_header {
      default "Accept";
      "1"     "";
  }

  # if proxying to another backend and using nginx as cache
  proxy_cache_path  /tmp/cache levels=1:2 keys_zone=my-cache:8m max_size=1000m inactive=600m;
  proxy_temp_path /tmp/cache/tmp;

  server {
    listen       8081;
    server_name  localhost;

    location ~ \.(png|jpe?g)$ {
      # set response headers specially treating MSIE
      add_header Vary $vary_header;
      add_header Cache-Control $cache_control;
      # now serve our images
      try_files $uri$webp_suffix $uri =404;
    }

    # if proxying to another backend and using nginx as cache
    if ($http_accept ~* "webp")    { set $webp_accept "true"; }
    proxy_cache_key $scheme$proxy_host$request_uri$webp_local$webp_accept;

    location ~ ^/proxy.*\.(png|jpe?g)$ {
      # Pass WebP support header to backend
      proxy_set_header  WebP  $webp_accept;
      proxy_pass http://127.0.0.1:8080;
      proxy_cache my-cache;
    }
  }
}
複製程式碼

想了解更多可以參考如下文章：

Backend 處理

Backend 是基於 KOA 框架搭建的，要整合動態支援 WebP，需要完成如下兩個任務：

獲取請求頭中的Accept欄位，判斷是否支援 WebP。這一步也可由 Nginx 來做。

// 獲取請求頭：ctx.header.accept, ctx.headers.accept、ctx.req.headers.accept、ctx.request.headers.accept、ctx.request.header.accept
const isWebp = /webp/i.test(ctx.header.accept);
// 注意: 雖然 KOA 提供`ctx.accept('webp')`方法來判斷accept type。但是該方法對webp判斷存在bug，它會將`*/*`作為支援來處理。
複製程式碼

新增圖片處理功能。要動態支援 WebP，這就需要 Backend 具備圖片處理功能。node 相關的圖片處理庫：
- sharp
- jimp
- gm

sharp 相比於 jimp、gm 綜合效能更好，對 WebP 支援更友好。因此這裡使用 sharp 來實現圖片格式轉換、縮放、水印等功能。npm 對比資料：gm vs jimp vs sharp 。

關鍵程式碼

const fs = require("fs-extra");
const path = require("path");
const send = require("koa-send");
const sharp = require("sharp");
const glob = require("glob");
const TextToSvg = require("text-to-svg");

// 配置sharp
sharp.concurrency(1);
sharp.cache(50);
module.exports = async ctx => {
  // getSvgByText
  const getSvgByText = (text, fontSize, color) => {
    const textToSVG = TextToSvg.loadSync();
    const svg = textToSVG.getSVG(text, {
      fontSize,
      anchor: "top",
      attributes: {
        fill: color
      }
    });
    return Buffer.from(svg);
  };

  const originals = glob.sync(
    path.join(__dirname, "public", "originals", "*.+(png|jpeg|svg|jpg)")
  );
  
  const nameMapOriginal = {};
  originals.forEach(original => {
    const metas = path.parse(original);
    nameMapOriginal[metas.name] = original;
  });

  // getOriginals
  const getOriginalsByName = name => nameMapOriginal[name];

  const imgProcessor = async (
    inputPath,
    outputPath,
    { overlay, width, blur }
  ) => {
    const image = sharp(inputPath);
    const metadata = await image.clone().metadata(); // 獲取原圖片的後設資料
    const rawWidth = width || metadata.width;

    if (
      overlay !== "off" &&
      metadata.width > 200 &&
      metadata.height > 100 &&
      rawWidth > 200
    ) {
      const tempFontSize = (rawWidth * 0.03) | 0; // eslint-disable-line
      const fontSize = tempFontSize < 12 ? 12 : tempFontSize;
      overlay = getSvgByText(
        "zhansingsong.com",
        fontSize,
        "rgba(255, 255, 255, 0.3)"
      ); // eslint-disable-line
      await image
        .clone()
        .overlayWith(overlay, { gravity: sharp.gravity.southeast })
        .resize({ width: parseInt(width, 10) })
        .toFile(outputPath)
        .catch(err => ctx.app.emit("error", err));
    } else if (!blur) {
      await image
        .clone()
        .resize({ width: parseInt(width, 10) })
        .toFile(outputPath)
        .catch(err => ctx.app.emit("error", err));
    } else {
      await image
        .clone()
        .resize({ width: parseInt(width, 10) })
        .blur(1.3)
        .toFile(outputPath)
        .catch(err => ctx.app.emit("error", err));
    }
  };
  const { join, parse } = path;
  const { existsSync, ensureDirSync } = fs;
  // 編碼中文亂碼
  const url = decodeURIComponent(ctx.path);
  const metas = parse(url);
  const isWebp = /webp/i.test(ctx.header.accept); // 判斷是否支援webp
  const isThumbnail = /^\/public\/thumbnails\//.test(url);
  const fileDir = isThumbnail
    ? join.apply(path, [
        __dirname,
        "public",
        "thumbnails",
        `${ctx.query.width || 20}`
      ])
    : join.apply(path, [
        __dirname,
        "public",
        "imgs",
        ...Object.values(ctx.query)
      ]);
  const filePath = join(
    fileDir,
    `${metas.name}${isWebp ? ".webp" : metas.ext}`
  );
  const options = isThumbnail
    ? {
        width: ctx.query.width || 20,
        overlay: ctx.query.overlay || "off",
        blur: true
      }
    : ctx.query;

  ensureDirSync(fileDir);
  if (!existsSync(filePath)) {
    await imgProcessor(getOriginalsByName(metas.name), filePath, options); // eslint-disable-line
  }
  await send(ctx, filePath, { root: "/" });
};
複製程式碼

實現效果

通過 sharp 為 Backend 實現了一些簡單圖片處理介面：圖片壓縮、水印、格式轉換。這也為後面縮圖的使用提供了支援。處理效果如下圖所示：

從上圖可知:

Safari 和 Chrome 瀏覽器分別請求同一圖片，響應結果各不相同。瀏覽器支援 WebP 時，會直接響應 WebP 圖片。否則就響應請求圖片。
相同質量的圖片，WebP 格式大小約為 png 格式大小的 0.43。

總結

本文是自己在使用 WebP 的一些心得總結。主要對 WebP 的使用做個簡單介紹。至於為什麼要用 WebP，本文也做了相關介紹。但這並不代表 WebP 沒有缺點。如在編解碼效率上就存在不足。不過隨著硬體裝置的提升，這也在可接受範圍內。隨著移動網際網路的快速發展，PWA(Progressive Web App)必成為 Web App 的主流。而 WebP 是 PWA 一個組成部分，瞭解並支援 WebP 已成大趨勢。目前很多主流的站點已全站或部分支援 WebP。

網站效能優化實戰（二）
2018-09-10
網站優化
webpack優化之HappyPack 實戰
2018-04-20
Web優化APP
站點優化記錄
2019-02-26
優化
Linux效能優化實戰CPU篇之總結（四）
2022-03-03
Linux優化
MySQL——索引優化實戰
2018-08-08
MySql索引優化
美團點評資料平臺Kerberos優化實戰
2018-05-23
ROS優化
Python爬蟲，JS逆向之 webpack 打包站點原理與實戰
2022-05-23
Python爬蟲JSWeb
大型站點TCP/IP協議優化
2022-01-12
TCP協議優化
Linux效能優化實戰CPU篇之軟中斷（三）
2022-03-03
Linux優化
mpvue效能優化實戰技巧
2019-04-16
Vue優化
Golang 微服務優化實戰
2020-08-27
Golang微服務優化
MySQL 優化實戰記錄
2019-04-01
MySql優化
Linux效能優化實戰（一）
2022-02-07
Linux優化
Linux效能優化實戰（二）
2022-02-17
Linux優化
WEB站點效能優化實踐（載入速度提升2s）
2019-05-11
Web優化
Springboot實戰——黑馬點評之秒殺最佳化
2024-09-28
Spring Boot
乾貨｜優酷小程式優化實戰
2021-11-12
優化
Hive使用Calcite CBO優化流程及SQL優化實戰
2020-09-22
Hive優化SQL
提高網站訪問效能之Tomcat優化
2020-06-09
網站Tomcat優化
Flutter Web網站之ScrollView+GridView優化
2020-05-03
FlutterWeb網站View優化
慢SQL優化實戰筆記
2020-07-26
SQL優化筆記
搭建 VuePress 站點必做的 10 個優化
2022-03-29
Vue優化
網站效能優化實戰（二）——深入淺出瀏覽器渲染機制
2018-08-12
網站優化瀏覽器
網站效能優化實戰——從12.67s到1.06s的故事
2019-03-04
網站優化
VuePress 部落格之 SEO 優化（六）站長工具
2022-03-22
Vue優化
實戰流量提升方法優化Product Ads
2019-11-04
優化
實戰 PerfDog 優化小遊戲效能
2020-08-25
優化遊戲
App監控和效能優化實戰
2021-11-19
APP優化
百萬推薦關係優化實戰
2020-12-21
優化
網站人工最佳化實戰：專業、高效的網站最佳化！
2024-05-31
網站
Flutter效能優化實踐之Timeline
2021-07-29
Flutter優化
網站效能優化
2018-09-04
網站優化
網站如何優化
2022-07-05
網站優化
《Spring Boot 實戰紀實》之關鍵點文件
2020-12-20
Spring Boot
基於XDanmuku的Android效能優化實戰
2019-03-01
Android優化
js開發實戰優化小技巧001
2018-10-26
JS優化
【真·乾貨】MySQL 索引及優化實戰
2018-10-31
MySql索引優化
Linux效能優化實戰課程教學
2018-12-21
Linux優化