【実践】Googleの画像フォーマット「WebP」でページスピード改善

WebPという言葉を聞いたことがあるでしょうか？「ウェッピー」と呼びますが、WebPとは、Googleが作った画像フォーマット。WebPは表示速度短縮を目的とした画像フォーマットとなります。

最近Googleは、Core Web Vitals（コア ウェブ バイタル）という指標を検索ランキング要因に組み込むことを発表しています。Core Web Vitalsでは、ページの表示速度も評価のひとつとなるので、サイトの速度改善は、SEO対策をするなら至上命令の改善項目となっていきます。

速度改善には、「画像サイズの軽量化」が１つの手段となるので、WebPという画像フォーマットは是非とも取り入れたいフォーマットとなります。

画像フォーマットとは？

画像フォーマットは、「jpg」「png」「gif」などが代表的ですが、画像ファイルには、「ファイル名.png」などのように拡張子が付きます。

WebPも同様に画像フォーマットですが、「jpg」「png」「gif」のような画像フォーマットよりもファイルサイズの軽量化が可能で、「png」よりも26％、「jpg」よりも34％程度の軽量化ができる次世代画像フォーマットです。

次世代画像フォーマットとしてはWebPの他、「JPEG 2000」「JPEG XR」などがありますが、「JPEG 2000」「JPEG XR」は処理速度が遅くなるデメリットや対応環境の少なさという問題があり、現時点では「WebP」が一番扱いやすそうです。

WebP対応のブラウザが拡大

WebPは以前から存在していた画像フォーマットだったものの、WebP形式の画像に対応しているブラウザは限られており、なかなか導入には踏み切れなかったサイトも多かったかもしれません。
しかしここに来て、朗報です。
Safariが次のバージョンでWebPを標準機能としてサポート予定のようです。
Safariに対応されるとなると、現時点でのWebP対応主要ブラウザは、IEを除くGoogle Chrome、Firefox、Edge、Safariとなり、概ねカバーできる状態となります。

[参考]https://caniuse.com/#feat=webp

WebPを取り入れる際のHTMLの注意点と記述方法

概ね主要ブラウザはWebP形式の画像に対応しているものの、まだ非対応のブラウザもあるという点を注意しなければなりません。この点をカバーするには、非対応ブラウザには、別の画像を出すといった以下のような記述をしてあげる必要があります。

example.png.webpという画像がWebp形式の画像となります。1枚の画像について２つの画像フォーマットを指定しているのですが、
example.png.webpの画像が表示できない場合は、example.pngを表示してね、という指定となります。

また、画像の拡張子はexample.webpでも問題ないですが、後々、pngを基に作られたwebp画像なのかなどという判断がしやすくなります。

WebPへ画像変換を実践

それでは早速、画像変換を実践していきます。今回はフリーツールsquooshを利用して画像変換を実践していきます。

SEO Packのトップページの画像を変換してみました。squooshに画像をドラッグして変換するフォーマット（WebP）を選択。画面右下の保存アイコンを押すだけでWebP形式の画像が作成できました。

画像サイズの変化はというと、元のpng形式の画像は「397 KB」だったのですが、WebP形式に変換すると、なんと「48.4 KB」に軽量化されました。
早速、変換した画像をサーバーにアップロードし、該当のhtmlの記述を変更してみました。
実装前と実装後をPageSpeed Insightsで比較した結果は次のとおりです。

今回の検証では画像1枚のみの変更だったのですが、パソコンのスコアは大きく改善されている一方、モバイルのスコアは少しマイナスになってしまいました。この原因はページスピードの主原因が、画像サイズというより外部スクリプトによるところが大きいため上記のスコア変化となったと予想しています。

PhotoshopでWebP画像を作成も

PhotoshopでもプラグインをインストールするとWebP画像の書き出しが可能です。
github.comからファイル一式ダウンロードしてダウンロードしたプラグインをPhotoshopのアプリケーションフォルダにコピーするとWebP形式の画像を開く事や保存が出来るようになります。

WebPを取り入れるメリット

上述した通り、画像サイズが大幅に軽量化される事はもちろんですが、画像の形式が統一されるという点も運用上メリットといえますね。

WebPを取り入れるデメリット

将来的にはメリットしかないといえますが、現状だとまだ対応していないブラウザがあるため、その点を考慮し代替画像フォーマットの設定をする事が必要となっています。

次世代フォーマットWebPまとめ

ここまでWebPについて現状や実践方法などご紹介してきました。フォーマット変換自体はツールを利用すると簡単に実施できます。
ページスピードの改善は、画像サイズの軽量化だけでは改善しにくい面もありますが、一番着手しやすい部分だと思います。
皆さんも是非、WebPフォーマットの画像を取り入れてみてはいかがでしょうか。