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

記事内に広告が含まれていることがあります。
EIO-Nginx記事用アイキャッチ

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

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

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

  • WebPが何かわかる
  • NginxでもEWWW Image Optimizerが使える方法がわかる
  • WebP配信までの手順がわかる
WordPressカテゴリーCTA
\ココナラでWordPressエラー修正サービス始めました!/

ココナラでWordPressのエラー解決サービスを始めました!

追加オプション無しで3,000円から受け付けておりますが、新規会員登録で300円、僕の紹介コードを入力すると1,000円分のポイントが貰えるので実質1,700円から利用することができます!

  • 突然画面が真っ白になった
  • 英語のエラーが表示されてどうしたらいいかわからない
  • とにかく困っている

どんなことでもぜひお気軽にご相談ください!

紹介コード:K0GR23
スポンサーリンク
スポンサーリンク

WebPとは

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

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

凄くざっくり言うと

  • 画像容量が小さくなって
  • 機能もめっちゃ良くて
  • Googleも押してる画像フォーマット

それがWebPです。

拡張子は.webp

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

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

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

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

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

Microsoft(Googleのライバル!)やWikipediaVISAThe New York Timesなんかでも導入が確認できました。

もちろん各企業とも全ての画像をWebP化している訳ではありません。特に他サイトから画像を表示している場合、そちら側も対応しなければならないので100%WebPというのはまだ難しいです。

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です。

2020年末にリリースされたBigSur以降のSafariがついにWebPを標準でサポートしました。
これにより現在の最新版ではすべての主要ブラウザがWebP対応になりましたが、まだまだ古い環境を使っているユーザーは存在するので基本はWebP、非対応ならjpg/png等で出し分けを行いましょう。

EWWW Image Optimizerでできること

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

  • WordPress上に画像をアップロードしただけで自動圧縮
  • 画像ファイル(jpg/png/gif)を残したまま自動でWebP変換
  • 一度設定すればそれ以降も自動で圧縮&変換
  • 対応ブラウザにはWebPを、非対応ブラウザには元の画像ファイルを自動出力

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

Nginxは設定が必要!

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

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

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

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

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

ちなみに単純比較として、ApacheよりもNginxの方が早いです。
もちろん設定や様々な状況によって実際我々ユーザー見るWebページの表示速度は変わりますが、基本的な応答速度としての解釈としてはNginx>Apacheです。
Nginxが使えるVPSの場合、どちらでも選べるならNginxで良いかなと思います。

EWWW Image Optimizerの導入

EWWW Image Optimizer - インストール
EWWW Image Optimizerをインストールし、有効化します

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

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

EWWW Image Optimizer - エラー
サーバーの状況によってはこんなエラーが出る場合がありますが、一旦無視してOK

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

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

EWWW Image Optimizerの設定

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

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

設定 > EWWW Image Optimizer

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

EWWW Image Optimizer - WebP設定
JPG, PNG から WebPにチェックを入れる。サーバー環境によってはJS WebP Rewtitingもチェック

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

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

ConoHa VPSでKUSANAGI managerを使用してKUSANAGI環境を構築した場合、ここにチェックを入れないと動きません(これを解説しているサイトが無く僕は1時間近く格闘しました・・・笑)。

EWWW Image Optimizer - 設定反映
こんな画面が表示されればOK

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

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

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

Nginxの設定

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

EWWW Image Optimizer - エラー
サーバーの状況によってはこんなエラーが出る場合がありますが、一旦無視してOK

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

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

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

今回は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に記載してください)。

コマンド - vi
コマンド – vi
コマンド
$ sudo vi /etc/nginx/conf.d/example.com_http.conf
#example.comにはご自身のドメイン名を入力
#他社VPSの場合lsコマンドでhttp.confを探してみてください
Nginx設定ファイル
Nginx設定ファイルにWebPを使えるよう設定していきます
/etc/nginx/conf.d/example.com_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タイプの記載を行います。

コマンド -vi
viコマンドでmime.typesファイルの編集を行います
コマンド
$ sudo vi /etc/nginx/mime.types

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

コマンド - vi
元からwebpの記述があればそのままでOK

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

Nginx再起動

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

コマンド - systemctl
systemctlコマンドでNginxを再起動します
コマンド
$ sudo systemctl restart nginx.service

WebP有効化の確認

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

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

EWWW Image Optimizer - PNG
EWWW Image Optimizer – PNG
EWWW Image Optimizer - WebP
EWWW Image Optimizer – WebP

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

既存画像の変換

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

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

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

メディア > 一括最適化

とクリックします。

EWWW Image Optimizer - 一括最適化
EWWW Image Optimizerを使って既存画像の一括再変換を行います

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

EWWW Image Optimizer - 一括最適化
画像の検索後最適化を開始をクリック

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

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

WebP配信の確認

Google Chrome - デベロッパーツール
Networkタブのimg属性を選択し、配信画像形式をみます

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

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

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

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

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

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

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

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

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

ConoHa VPS まとめ記事用アイキャッチ

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

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

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

ConoHa VPS+KUSANAGIで始めるWordPress講座!初心者でもステップ形式で導入が可能です!KUSANAGI managerの使い方からコマンドまで全部解説
WordPress高速化エンジンKUSANAGIは、ConoHa VPSと組み合わせて使う事で初心者の方でも比較的簡単に導入が可能です。KUSANAGI managerを使った登録方法から設定やWordPressの設定まで全て解説!日本一分かりやすいKUSANAGIの始め方です!
スポンサーリンク
WordPress
スポンサーリンク
\この記事いいね!と思ったらシェアしてね/
スポンサーリンク
L'7 Records

コメント

  1. かみやま より:

    はじめまして。
    現在、KUSANAGI内のWordPressにewwwを導入しようと試行錯誤中で、こちらの記事を参考させていただきながら導入しております。

    ただWebの知識が乏しく、gifsicleのインストールの件で、コマンドが書いてありますが、このコマンドをどこで、何のツールを使って打てばよいのか分かりません。

    コマンドプロンプトは少しいじったことがある程度で、cdで移動してFirebaseにデプロイした時にしか使ったことがありません。

    もし可能であればそのあたりの方法をご教授いただければと思います。

    よろしくお願い致します。

タイトルとURLをコピーしました