Nginx 判斷并提供 WebP & AVIF 格式圖片

WebP 和 AVIF 是兩種圖像格式。它們能夠生成比 JPEG 和 PNG 更小的文件，也都支持有損和無損壓縮，以及 alpha 透明度。

WebP 最初在 2010 年 09 月釋出，其支援庫於 2018 年 04 月發布 1.0 版本。它的設計目標是在減少檔案大小的同時，達到和 JPEG、PNG、GIF 格式相同的圖片品質，並希望藉此能夠減少圖片檔在網路上的傳送時間。根據 Google 較早的測試，WebP 的無失真壓縮比網路上找到的 PNG 檔少了 45％ 的檔案大小，即使這些 PNG 檔在使用 pngcrush 和 PNGOUT 處理過，WebP 還是可以減少 28％ 的檔案大小。

AV1 圖像檔案格式（AV1 Image File Format，簡稱 AVIF）是由開放媒體聯盟開發，採用 AV1 視訊編碼技術壓縮圖像的一種圖像檔案格式，能用來儲存一般的圖像和動態圖像。在 Netflix 於 2020 年的數個測試中，AVIF 展現了比 JPEG 更為優秀的壓縮效率，也保存了更為豐富的細節，幾乎沒有方塊效應，在輪廓分明、色彩鮮豔的天然圖像和材質中有更少的色彩失真。

在目標站點的 .conf 配置文件中添加以下内容：

  map $http_accept $webp_suffix {
    default        "";
    "~image/webp"  ".webp";
  }
  map $http_accept $avif_suffix {
    default        "";
    "~image/avif"  ".avif";
  }

  server {
    location ~ ^/.*\.(png|jpe?g|gif)$ {
      add_header Vary Accept;
      try_files $uri$avif_suffix$webp_suffix $uri$avif_suffix $uri$webp_suffix $uri =404;
    }
  }

假如瀏覽器請求訪問 /demo.jpg 圖片文件，該瀏覽器僅支持 WebP 不支持 AVIF 的情況下，Nginx 將會嘗試提供 /demo.jpg.webp，如果瀏覽器同時支持 WebP 與 AVIF 格式，Nginx 將會嘗試提供 /demo.jpg.avif，兩種格式皆不支持的情況下則會返回 /demo.jpg 文件。目錄中應該有 demo.jpg / demo.jpg.webp / demo.jpg.avif 三種格式的命名文件，上述設置的規則才能夠正常運行。