WordPressでWebpの画像を使用する【nginx】

ApacheのサーバーでWordpressを運用した時は、「EWWW Image Optimizer」のプラグインを利用してWebpの画像を利用していました

最近、Webサーバーをnginxに移行しました。nginxでWebpの画像を取り扱えるようにする方法を紹介します

【前提条件】

• WordPressにて EWWW Image Optimizer プラグインがすでにインストール・有効化されている
• EWWW側で WebP 変換 オプションが有効になっていること（画像フォルダに .webp が生成されている）
• WordPressがインストールされているのはVirtualHostで運用さている

mapディレクティブを追加します。mapディレクティブはhttpブロックの直下 に記述する必要があります。下記では「/etc/nginx/nginx.conf」にhttpディレクティブの中に記述しています

$ sudo vim /etc/nginx/nginx.conf

http {
# 下記を追加
    map $http_accept $webp_suffix {
        default "";
        "~*webp" ".webp";
    }
# ここまで
    ...
    include /etc/nginx/sites-enabled/*;
}

VirtualHostの設定ファイルに以下を追加

$ sudo vim /etc/nginx/sites-enabled/example_com.conf
server {
  ....
# 以下を追加
  location ~* ^/wp-content/uploads/.*\.(png|jpe?g)$ {
      add_header Vary Accept;
      try_files $uri$webp_suffix $uri =404;
  }
# ここまで
}

設定を追加したら、ngiosの設定をチェックして再起動します

$ sudo nginx -t && sudo systemctl reload nginx

ブラウザの開発者ツールでwebpに対応しているか確認します

WebPが実際に配信されているか（開発者ツールで確認）

• ブラウザで画像を表示
• 開発者ツール（F12）→「Network」タブ → 対象画像をクリック
• Content-Type: image/webp になっていればOK