dedede WebPとは？
WebPとはGoogleが開発している次世代型の画像フォーマット(拡張子)です。jpegやpngと同等な画質で容量は非常に小さいのが特徴で、WEBページの読み込み速度改善に大きく寄与します。
画像にもよりますが、私が使っている感じではjpegやpngの半分くらいのサイズになる感覚です。
本記事では、このWebPをWordPressで導入する方法と未対応ブラウザに対しての対処方法を紹介します。
大まかな導入の流れは以下です。
- EWWW Optimizer プラグインをインストール
- 画像の自動最適化 兼 WebPの自動生成
- プラグインでWebPの設定
それでは実際の設定方法を見ていきましょう。
設定手順(動画説明あり)
プラグインの基本設定
まずはワードプレスでプラグインの EWWW Image Optimizer をインストールとプラグインONにしてください。
有効にすると、初期設定のウィザードが開きますがデフォルトの設定ではいを選択して進んでいってください。
その後メディアの一括最適化で自動最適化をします。（以下の動画参照)
方法は簡単で、 メディア → 一括最適化 → 最適化されていない画像をスキャン
WebPの有効化
次にWebPの有効化をします。上記動画を参考にしていただきたいのですが、
設定 → EWWW Image Optimiozer → リライトルールを挿入する → “JS WebPリライト” にチェック
→変更を保存
の順で押しましょう。
ちなみに、このリライトルールというのは.htaccessファイルにWebPを有効化する設定を書き込んでいます。
そのままコピペーで該当ファイルに書き込んでもいいのですが、めんどくさいのでクリックしましょう。
リライトエラーが出る場合…..
上記のように、リライト時に “WebPの応答がMIMEタイプテキストに失敗しました” 等のエラーが出る場合はサーバー側のエラーである可能性が高いです。
というのも、.htaccessファイルの設定はnginxというWebサーバーを使っている場合はうまく動作しない場合があります。(厳密には対応していない記述がある)
もし本番サーバーでnginxを使っている場合は当記事の方法ではできませんので他のプラグイン等で試してみてください。ただし、Localを使っている場合は簡単にWebサーバーをnginxからApacheに変えられますので以下の方法で試してみてください。
※補足になりますが、他の機能などでもnginxよりもApacheの方が優れていることが多いため、可能であればApacheを選ぶ様にしましょう。
設定が反映されているか確認
ここまでで設定はできたので実際にWebPが出力されているかを確認しましょう。
確認方法はいろいろありますが、検証ツールで ネットワークタブを開き ”タイプ”を見ると分かりやすいです。
拡張子が表示されるためwebpと表示されるはずです。
ここまでで完了です。どうですか？この様に簡単に設定できます。
非対応ブラウザへの対処
一つ注意していただきたいのですが、WebPのデメリットは対応していないブラウザがある ということです。IEがその典型的な例で、直でwebPファイルを設定すると何も表示されません。
ではこれに対してどう対処するかですが、このEWWWで設定している場合は
結論:何もしなくても自動で対応される
です。というのも、EWWWではサーバーがWebPが使用できるブラウザかどうかを判断し出力する画像の種類を振り分けてくれるからです。
具体的にはJavaScriptによってHTMLのbody要素にwebp-support というクラスが付与されてこれによってimgが適当に処理されます。（実際はクラス以外も関わっていますが、、）
まとめ
- WebPを使えば画像読み込み速度を大きく改善できる。
- EWWWを使ってのWebPならば非対応ブラウザにも自動で対処される。
ちなみにこちらの記事はinstagramでも投稿していますので、忘れないように保存しておきましょう！笑
