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
コメント