WordPressでサイトを運営されているみなさん、画像のWebP変換はもうお済みでしょうか？
プラグイン1つで簡単に設定できます。これはマストです！
というわけでこんにちは。今回はGoogleが開発している画像の次世代フォーマット、WebPについてです。ちなみに読み方は「ウェッピー」らしいですね。
より良い圧縮技術によって、画像サイズを小さくできます。つまりSEOの観点からもぜひ導入しておきたいということですね！
今回はWordPressのプラグインを使って、WebP変換に対応させる方法について解説して行きます。
EWWW.Image Optimizerで簡単に。
次世代フォーマットは分かったから、どうすればいいのさ？と思うでしょう。
今回はこちらのプラグイン「EWWW.Image Optimizer」を使います。
このプラグインは他にも様々な機能があります。解説記事はこちら
ここからはこのプラグインを使ったWebP変換の方法、さらには確認方法やキャッシュについても網羅して行きます。
ここからEWWW.Image Optimizerをインストールして初期設定までを済ませたという前提で行かせていただきます。これについては他のサイトで詳しく解説されているため、そちらを見ていただければと思います。
WebP変換の手順。コードを.htaccessに貼り付けるだけ！
WebP変換をするのに難しいことはありません。
まずはEWWWの設定を開いて最初に出て来るタブの中で「WebP変換」にチェックを入れます。すると、その下に<IfModule mod_rewrite.c>から始まるコードが表示されると思います。
この全文をコピーして.htaccessに貼り付ければ完了です。流石にここでは.htaccessを操作しなければいけませんね。簡単と言いつつも、この時には注意点があります。
注意点は2つです。
・まず1つ目についてですが、.htaccessに変更を加えるときには必ずバックアップを取りましょう。下手するとサイトが開けなくなります。もう耳にタコができているかもしれませんが…。後述しますが、これは本当に起こります。
・次に2つ目についてです。これは文字通りの一番上ですね。入れたプラグインやテーマによって色々と記述が追加されていると思いますが、その辺は気にせず一番上に貼り付けましょう。
.htaccessへの記述方法はサーバーによって異なると思いますので、使っているサーバーについて調べてみてください。
例えばConoHaの場合はかなり簡単です。サイト管理＞サイト設定＞応用設定＞.htaccess設定ですね。これで手軽に追記することができます。ここに表示されているのが、WebP変換のためのコードですね。
一括最適化で既存の画像をWebP変換
ここまででWebP変換への対応はできました。ここでEWWWの設定を見てみましょう。この画像のようにWebPのところが緑になっていれば大丈夫です。
ここで一括最適化の設定画面から既にアップロードしている画像のWebP変換をしましょう。この画面で右の「WebPのみ」にチェックを入れて最適化すれば完了です！最適化された画像の欄でWebPのデータ容量も表示されればOKです。
一応、Chromeから確認してみる
さて、最後に一応、無事にWebP変換が成功しているか確認してみましょう。
これにはChromeのデベロッパーツールを使います。自分のページを開き、右クリックから「検証」を選ぶとデベロッパーツールが開きます。画面が狭くなるので、全画面表示にした方が良いかもしれません。
次に右上のメニューから「Network」を選び、さらにその少し下にある「img」を選択します。
場合によってはここでページを更新（リロード）する必要があるかもしれませんが、このように画像ファイルの一覧が表示されると思います。
ちょいちょいjpegになっているのもありますが、自分がアップロードした画像の拡張子がだいたいwebpになっていたら大丈夫です！
他にもいくつかの方法がありますが、これが一番簡単、確実かなと思いました。デベロッパーツールをいじったことによってサイトに影響が出ることはないので、手軽な確認方法ですね。
今までにあまり使ったことのない方はこの機会に試してみてください！
最後にキャッシュの設定
これに関しては触れていないサイトもありますが、WebPのキャッシュについてです。これも.htaccessに追記することになるので注意が必要です。間違った場所に書くと本当にWordPress管理画面に入れなくなります。なりました。
とりあえずキャッシュを有効にするためには、
ExpiresByType image/webp “access plus 1 year”
を記述すれば良いです。ちなみにyearのところはweeksというのもありますね。ここで、記述する場所に注意が必要です。
僕の場合はテーマにCocoonを使っていて、テーマによって.htaccessに記述された部分がありました。上のコードと同じ形式のコードが何行にも渡って書かれていたので、そこにこれをコピーしてしまったのですね。
すると、あら不思議。サイトが開けなくなりました。テーマによって自動で追記されたものと手書きのコードを混ぜてはいけない、ということですね。
これを回避するため、テーマとは無関係の場所に記述することにします。.htaccess内には「#BEGIN 〜〜〜」と「#END 〜〜〜」によって囲まれた部分があり、ここの外部に記述するようにしましょう。僕の場合はテーマによって追加された記述の上に
#WebP変換のキャッシュ設定。
<IfModule mod_headers.c>
<IfModule mod_expires.c>
ExpiresActive On
#キャッシュ初期化（1秒に設定）
ExpiresDefault “access plus 1 seconds”
ExpiresByType image/webp “access plus 1 year”
</IfModule>
</IfModule>
を記入しました。（#の行は単なるコメントです。念のため）
場合によってはいくつかのページを開いたときに400エラーが出ることがありそうですが、ブラウザのキャッシュを削除すれば改善しました。
つまり以前にあなたのサイトを訪問した方には同じ症状が出るかもしれません。この記事を読んでいる人の中にはサイトを立ち上げて間もない方も多いと思いますが、既にかなりのPV数となっている方は気を付けた方が良いでしょう。
まとめ。WebP画像を導入しよう！
ここまで、WordPressのプラグイン「EWWW.Image Optimizer」を使った画像のWebP変換について解説してきました。
WebP変換のためのコードのコピペに、Chromeを使った確認方法、キャッシュの設定まで、必要な作業は網羅できたと思います。これによってページの表示速度も改善されることでしょう。Page Speed Insightにこだわり過ぎるのは良くないらしいですが…。
それではまたお会いしましょう。
