KUSANAGIでもWebp導入！Nginx環境でEWWW Image Optimizerを動かそう！

次世代画像フォーマットWebPウェッピーはGoogleが開発している方式で、少しずつじわじわと対応しているWebサイトが多くなっています。

WordPressではEWWW Image Optimizerを使って自動でWebP化、対応していないブラウザにはjpgやpngと言ったものを表示という事が非常に気軽に行えます。

そこでNginx環境下でもEWWW Image Optimizerを使ってWebP化の導入をして行きたいと思います！

WebPとは

WebPとはGoogleが開発している次世代画像フォーマットの一つで、JGP/PNG/GIFと言ったWebで主流な画像フォーマットの代わりとなるものです。

一般的にJPG等に比べて数十％圧縮され、機能も優れておりGoogleのPageSpeed Insightsでも置き換えが推奨されています。

凄くざっくり言うと

それがWebPです。

拡張子は.webp

画像ファイルといえば.jpg、.png、.gif、.bmp等が有名です。

一方WebPはまだまだ普及しきっていない規格、拡張子は見慣れない.webpです。

有名Webサイトでも利用事例

WebPはGoogleという巨大IT企業が押してるだけあり大手Webサイトでも導入事例があります。

例えば日本の企業だとSonyや任天堂、テレビ東京なんかがWebPを一部導入していますね。

Microsoft（Googleのライバル！）やWikipedia、VISAやThe New York Timesなんかでも導入が確認できました。

Safariは非対応

実はWebPは海外企業の方が導入が多いようです。

というのも実はこのWebPはGoogle ChromeやFirefox、Edgeといった有名ブラウザには対応しているんですがAppleのSafariに関しては非対応です。

つまりWebP形式で配信してもiPhoneやMacのSafariでは見られません、残念ですね彼らは切り捨てましょう！

・・・なんて訳にはいきません、日本のiPhoneシェア率は凄まじいですから日本国内においてSafariユーザーをおいていくなんてWebサイト運営者としては考えられません笑。

そこで、WebPが見れるブラウザのユーザーは.webpで、Safariユーザーには今まで通り.jpgや.pngで表示するようにすればOK。

ただしこれを全部手作業でやるとなると、既存のjpgやpng画像をWebPに変換し更にHTMLベタ打ちのWebサイトで行おうとすると1つ1つのimgタグ（画像タグ）を書き換えをしなければなりません（.htaccessで一括制御する方法もあります）。

そこで我々WordPressユーザーはプラグインで一発解決しよう！という事で使用するプラグインがタイトルにある通りEWWW Image Optimizerです。

EWWW Image Optimizerでできること

EWWW Image Optimizerを導入するとこんな事ができます。

つまり僕らWordPress管理者は設定さえ行えば後は勝手にやってくれる訳です。

Nginxは設定が必要！

多くのレンタルサーバーはApacheアパッチというWebサーバーソフトウェアを採用しています。

このApache環境下は.htaccessエイチティアクセスという制御ファイルを使う事でWebP形式の配信を行う事ができます（EWWW Image OptimizerでWebPを有効にすると.htaccessに挿入するコードを表示してくれます）。

しかしWordPressを超高速で表示できるKUSANAGIクサナギを簡単に導入できるConoHa VPSではデフォルトのWebサーバーソフトウェアがNginxエンジンエックスです。

Nginxは.htaccessが使用できないのでNginxの設定ファイルを編集する必要があります。

ここがちょっと敷居が高いところなんですが大丈夫、全部まるっと解説するので手順通り行ってください！

EWWW Image Optimizerの導入

まずはWordPressプラグインのEWWW Image Optimizerをインストールして行きます。

プラグイン新規追加ページから「EWWW Image Optimizer」を検索し、インストール後有効化します。

サーバーの設定状況によってこんなエラーが出る場合があります。

ようは「サーバーに足りない部品があるよ！」というエラーなんですが、これは後ほど対処します。

EWWW Image Optimizerの設定

EWWW Imgae Optimizerは基本的な使い方としてはデフォルトでOKですが、WebP導入に関しては設定の変更が必要です。

WordPress管理画面左側のメニューから

設定　＞　EWWW Image Optimizer

と進み、WebPタブをクリックします。

一番上の「JPG, PNG から WebP」にチェックを入れます。

2のJS WebP Rewritingなんですが、サーバーの環境やCDN（コンテンツ・デリバリー・ネットワーク）を使用している場合はチェックが必要です。

保存をクリックすると、読み込まれた後保存ボタンの下に.htaccessにWebPの設定を挿入できるオプションが表示されます。

しかし今回はNginx環境なので.htaccessは使えませんので無視してOK。

右側の赤いPNG部分は、設定が完了して無事WebP化できれば表示が緑色のWebPに変わるのでひとまずここを緑色にする事が次の目標です。

Nginxの設定

それでは続いてNginxの設定ファイルを書き換えて行きます。

その前にさっきこんなエラーが出ていた方はまずそれを解決して行きましょう。

画像ファイルを扱うツールをインストールする

先述したエラーのうち、下段についてはサーバー側に画像ファイルを扱う為のツールが足りていない為出るエラーです。

今回はgifsicleが無いよ！と言われてるのでインストールします。

#libjpg
$ sudo yum -y install libjpeg
#optipng
$ sudo yum -y install optipng
#gifsicle←今回はこれ
$ sudo yum -y install gifsicle
#cwebp
$ sudo yum -y install libwebp-tools

足りないと怒られているツールをインストールしてください。

これで上段のエラーも消える

「EWWW Image Optimizerはツールフォルダーを作成できませんでした。」のエラーはパーミッションエラーだけでなく、ツールが無い為に作成ができなかったという旨も含んでいるようです。

僕が実際そうでしたが、ツールをインストールすればエラーは消えると思います。

Nginx設定ファイルの追記

続いてNginx設定ファイルに必要な記述を追記していきます。

/conf.d/ドメイン名_http.confの編集

通常は/etc/nginx/nginx.confのhttp{}ディレクティブの中に記述するんですが、ConoHa VPSでKUSANAGI managerを使ってKUSANAGI環境を構築している場合は/etc/nginx/conf.d/配下にドメイン名_http.confという設定ファイルがあります。

デフォルトでこのconf.d配下のconfファイルをnginx.confがインクルードしているので、今回はドメイン名_http.confに記述して行きたいと思います（他VPSやConoHa VPSの場合でもnginx.confに直接記述するような設定の場合、nginx.confに記載してください）。

$ sudo vi /etc/nginx/conf.d/example.com_http.conf
#example.comにはご自身のドメイン名を入力
#他社VPSの場合lsコマンドでhttp.confを探してみてください

#=======================================
# example.com
#---------------------------------------

map $http_accept $webp_suffix {
        add_header Vary Accept;
        try_files $uri$webp_suffix $uri =404;
}

server {
        listen 80 default_server;
        server_name www.example.com;
        return 301 https://example.com$request_uri;

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

画像内で赤色の文字の部分が今回追記した分。

まずserver {}ブロックの外（今回は#のコメント行の直下）にmap部分を記述。

そして今度はserver {}ブロックの内側にlocation部分を記述しています。

mapはserver {}ブロック内に書いてしまうとエラーになるので気をつけてください。

locationはserver {}ブロック内のできるだけ上が良いと思います、今回はwwwありでアクセスされた場合www無しに返すというリダイレクト設定の直下に書きました。

記述が終わったらESCキーで編集モードを抜け、:wqを入力しEnterキーを押して編集を確定させます。

/etc/nginx/mime.typesの編集

続いてmime.typesにMIMEタイプの記載を行います。

$ sudo vi /etc/nginx/mime.types

ザッと見てimage/webp webp;という記載が無ければ、同じようにimageという記載がまとまっている辺りに追記します。

ちなみに僕の環境では元からimage/webp webp;という記述があったので、同じく最初から記述があった方は編集不要です。

Nginx再起動

設定ファイルの追記が終わったらNginxを再起動させて追記した分を反映させます。

$ sudo systemctl restart nginx.service

WebP有効化の確認

設定が終わったので、いよいよWebPが有効になっているか確認します！

WordPressのEWWW Image Optimizerの設定ページ右下の表記を確認します。

赤色のPNGから緑色のWEBP表記になっていれば大成功、WebサイトのWebP設定が完了しました！

既存画像の変換

これから新規追加する画像は全てアップロードと同時にWebPへの変換も自動で行われますが、既存の画像はそのままです。

最後の作業として既存画像のWebP変換を行いましょう。

WordPress管理画面の左側にあるメニューから

メディア　＞　一括最適化

とクリックします。

まず最適化にチェックを入れ、「最適化されていない画像をスキャンする」をクリックします。

既存画像が多ければ時間がかかりますが、画像のスキャンが終わったら「最適化を開始」というボタンに変わるのでクリックして既存画像をWebP変換します。

ちなみにこの作業は画像枚数が多いと平気で数時間掛かったりするので、夜寝る前にでもやるのが良いと思います笑（もちろん変換作業中でもWebサイトそのものは問題無く閲覧できるので、いつ実行しても問題ありません）。

WebP配信の確認

実際にWebP形式で配信されているかどうかは、Google Chromeのデベロッパーツールで見るのが良いと思います。

例えばこの記事を開いてF12（Macの場合はCommandとOptionとi同時押し）でデベロッパーツールを開いて、Networkタブを開きImgフィルターをクリックします。

その状態でリロード（WindowsF5はするCommandとR同時押し）するとリアルタイムで読み込まれているimg属性のファイルが表示されますが、Type欄にwebpと表示されていれば問題無くWebP配信がされています！

NginxでもEWWW Image Optimizerを使ってWebP配信！

Apache環境下だとFTP経由で気軽にアップロードできる.htaccessを使って簡単にWebP化が行えますがNginxだとそれが行なえません。

導入ハードルはApacheより高いんですが、手順通り行う事でNginxでもWebP自動配信が行えます。

KUSANAGI自体にも高度な画像圧縮が元から採用されていますが、WebPで配信できるというのは一つのアドバンテージ。

どちらを導入するかはもちろんご自身で決めて頂いて、もしWebP配信を行いたいとなったら是非チャレンジしてみてください！

ConoHa VPS+KUSANAGIで始めるWordPress超高速環境

当記事はWordPressを超高速化できるWordPress専用仮想マシンKUSANAGIをConoHa VPSで初心者でも簡単に導入できるというコンセプトの1記事です。

手順通りに行えば誰でもKUSANAGI環境が実現できる！を目指して作成しました。

是非合わせてお読み下さい！

ConoHa VPS+KUSANAGIで始めるWordPress講座！初心者でもステップ形式で導入が可能です！KUSANAGI managerの使い方からコマンドまで全部解説

WordPress高速化エンジンKUSANAGIは、ConoHa VPSと組み合わせて使う事で初心者の方でも比較的簡単に導入が可能です。KUSANAGI managerを使った登録方法から設定やWordPressの設定まで全て解説！日本一分かりやすいKUSANAGIの始め方です！

www.braveryk7.com

2023.10.26