本日は画像フォーマットのWebP形式によるWebサイトの画像最適化をご紹介します。
WebPとは何？
概要
画像フォーマットとは画像の拡張子・形式を指します。画像フォーマットは大変奥が深く、選択が難しい分野の一つです。一概にこれを使え！とは断言できないですが、イラストのような画像は繊細さを残すためにはPNG、写真のような色彩豊かな画像はサイズを抑えるためにJPEG、アイコンのような画像はSVG（ベクターデータ）を使うと良いとされています。
今回はそれらに代わるWebPというフォーマットを紹介します。これはGoogleが推奨する画像フォーマットの一つでWebに適した次世代画像フォーマットのことを指します（Google製）。WebPは従来の画像フォーマットと比較してもサイズが小さくなるように設計されています。筆者のサイトでは、画像サイズが削減される場合はWebPを利用するようにしています。
WebP のロスレス画像については、PNG と比較して 26% 縮小されています。WebP のロッシー画像は、同等の SSIM 品質インデックスで、同等の JPEG 画像より 25 ～ 34% 小さくなります。
https://developers.google.com/speed/webp/
対応ブラウザについて
ただしWebPは対応ブラウザが限られるので注意が必要です。例えばInternet ExplolerではWebPは対応していません。
WebPの最新のブラウザ対応状況は https://caniuse.com/webp より確認することができます。ご自身のユーザの環境にあっているかをチェックしておきましょう。
サイトの画像のフォーマット確認方法
WordPressならばプラグインによっては、自動で処理がなされ、画像が自動で最適化されている場合もあるので、ご自身の環境で試してみてください。確認方法は以下のサイトを利用するとフォーマットと一緒にサイズ情報なども出力されて便利です。
Website Speed Test by Cloudinary
これで取得した画像がWebP形式になっていれば設定できています。WebPに限らず削減のポテンシャルが大きい画像を表示してくれるため、この結果を参考にWebP化や他フォーマットの採用を進めるとよいでしょう。
WebPの設定方法
プラグインを導入して対応する方法はありますが、筆者はプラグインをむやみに増やさないため、W3 Total Cache にて、メディアライブラリにアップロードした画像をWebPに変換する方法をします。パフォーマンスタブの拡張機能にあるImage Serviceという機能を有効化します。
有効化すればアップロードした画像が自動でWebPに変換されて別名保存されます。すでにメディアライブラリに保存されている画像をWebPに変換するには「Convert All」というボタンをクリックすれば完了です。画像はもとの画像と同じディレクトリに .png.webp という形式で保存されます。元の画像は消えないので安心してください。
もしくは EWWW Image Optimizer を利用する手もあるでしょう。このプラグインも画像をWebPフォーマットに変換する手段のひとつです。
技術的なお話: プラグインは何をしているのか？
さてプラグインを導入することで魔法のようにWebPが使えるようになったと思いますが、何が起こったのかを解説しておきます。技術よりのお話なので飛ばしてもらっても大丈夫ですが知っておくと何かとお得です。
紹介したプラグインはデフォルトでは以下のようなことを裏側で実行しています。
- 自分がメディアライブラリにアップロードした（する予定の）
jpegやpngをWebPに変換する - 画像のリクエスト を 元の拡張子 から
.webpに変換する
1つ目はそのままです。アップロードした画像のフォーマットを自動で変換してくれます。便利ですね。2つ目がポイントになります。例えばこの記事の先頭にアップロードされているWebPの対応ブラウザ表の画像のURLを確認してみましょう。
https://cdn.kaizen-seo.net/wp-content/uploads/2022/09/webp_avalilable-1-768x404.png
すると拡張子が.png となっていて変換されていないじゃないか！と思われるかもしれません。しかしブラウザから画像をダウンロードしてみましょう。
なんとWebP形式の画像がダウンロードできます。実は .png のURLにアクセスをすると、 自動的に以下のリンクのように .webp のURLに変換してくれます。つまりURLはそのままにしておきながら、WebPが使えるということです。なんとも便利ですね。これがプラグインのトリックです。
https://cdn.kaizen-seo.net/wp-content/uploads/2022/09/webp_avalilable-1-768x404.png.webp
※ より厳密にはApacheならば .htaccess に書き換えルールが追記されることによるものです。
もうすこし一般的なお話をします。WebPの配信方法には大きく分けて二種類の方法があります。
- Server-based delivery
- URLを書き換えるWebサーバ（Apache, nginxなど）の機能によって、画像URLをWebPへ Rewriteして配信する方法。
- HTML-based delivery
- HTMLで画像のURLをWebPに変換する方法。JavaScriptでURLを書き換える方法やpictureタグを使う方法がある。
Image Serviceでは、Server-based delivery を利用した方法がデフォルトでなされているということです。こういう仕掛けだったんですね。ちなみにEWWW Image Optimizer は好きな方法を選ぶことができます。ここでは解説しませんが、サイトによっては検討をしてみてください。
さいごに
最後に注意点としてすべての画像をWebPに変換すればいいというシンプルな問題ではないということです。逆に画像サイズが大きくなってしまう可能性があります。冒頭で紹介したJPEG、PNG、SVGなどと使い分けながら画像の特性にあったフォーマットを選びましょう。