在Nginx中支援 WordPress 的 Webp,Avif 圖檔

by rainchu | 12 月 19, 2024 | Nginx, SERVER, wordpress

大前提你要先安裝有支援 webp, avif 的外掛，例如EWWW, Convert Media等等

在 Nginx 配置中加 map 指令：

• 在 Nginx 的主配置文件，通常在 /etc/nginx/nginx.conf。
• 在 http {} 内、server {} 之前，加入以下内容：

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

• 配置客户端的 Accept ，來定義 $avif_suffix 和 $webp_suffix 變量，確認是否支持 AVIF 或 WebP 格式。

Nginx 讀取 AVIF 和 WebP 的 MIME Type：

找到 /etc/nginx/ 的 mime.types

image/avif  avif;
image/webp  webp;

在站點配置中設定重導向：

• 找到 /etc/nginx/sites-available/yourdomain。
• 在 server {} ，加入以下内容：

location ~* ^/wp-content/.+\.(jpe?g|png|gif)$ {
    add_header Vary Accept;
    add_header Cache-Control "private";
    expires 365d;
    try_files $uri$avif_suffix $uri$webp_suffix $uri =404;
}

作用是：

• 匹配所有請求的 .jpg、.jpeg、.png 和 .gif 文件。
• Vary: Accept ，告訴缓存系統按照 Accept 來區分不同的響應。
• 缓存控制和過期時間。
• 使用 try_files 指令，會先試提供的 .avif 文件，如果不存在，則提供 .webp 文件，若仍不存在，則提供原始文件。

測試並且重新加載 Nginx 配置：

sudo nginx -t
sudo systemctl reload nginx

這些配置假設您的 .avif 和 .webp 文件與原始圖片文件位於相同的目錄，並具有相同的文件名，只是副檔名不同（例如，image.jpg 對應 image.jpg.avif 和 image.jpg.webp）。

此外，請確保您的伺服器上已經存在對應的 .avif 和 .webp 文件，否則 Nginx 將返回 404 錯誤。

有關更多詳細資訊，您可以參考以下資源：

網站圖片無縫兼容 WebP/AVIF

在 Nginx 上提供 WebP 和 AVIF 圖片

圖片優化新選擇！WebP、AVIF 如何提升網站速度