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

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

Googleは、Core Web Vitals（コア ウェブ バイタル）という指標を2021年6月16日に検索ランキング要因に組み込みました。
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となり、概ねカバーできる状態となります。
以下は2022年6月時点のWebP対応主要ブラウザです。

[参考]https://caniuse.com/#feat=webp
IEは2022年の6月16日でサポートが終了し、アクセスするとEdgeブラウザが表示されるようになりました。
したがってIEはWebP非対応のブラウザだったのですが、今後はIE表示用に代替画像の用意など考えなくてもよくなります。

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

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

<picture><source type="image/webp" srcset="example.webp"><img src="example.png">
</picture>

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

WebPへ画像変換を実践

それでは早速、画像変換を実践していきます。今回はフリーツールsquooshを利用して画像変換を実践していきます。
squooshはGoogleが提供する画像圧縮ツールです。web上で画像をドラッグして圧縮作業をする為、とても簡単に圧縮が実施できます。
変換フォーマットはAVIF／JPG／PNG／JPEG XL／MozJPEG／OxiPNG／WebP／WebP v2となっています。
ここでは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は背景透過が可能なフォーマットとなります。png形式でも背景透過が可能ですが、データ容量が大きくなってしまいますが、WebP形式だと軽量化された状態で背景透過が可能となります。

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

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

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

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