WebPを使ってサイト表示を高速化する

広く普及している画像形式には GIF、JPEG、PNG があります。
これまでの Web ではこの形式のどれかを使って画像を表示されてきましたが、ブラウザが少しずつ新しい形式の画像形式にも対応するようになってきたことで、従来の画像よりも軽い形式の画像が使えるようになりました。
この記事では Google も使用を推奨している WebP 画像の作成方法と HTML での指定方法を説明します。

PageSpeed Insights の改善項目を眺めていると『次世代フォーマットでの画像の配信』という項目があります。
ここで推奨されているのが『WebP』『AVIF』という画像形式です。

WebPとは？

ウェッピーと読みます。
GIF、JPEG、PNG といった主要画像形式は WebP に変換して圧縮することができます。
Google が開発をした画像形式ということもあり、Chrome ベースのブラウザと相性が良いです。
WebP は JPEG より 30% サイズが小さくなり、PNG より 26% サイズが小さくなると紹介されています。（An image format for the Web  |  WebP）

AVIF とは？

WebP よりも高い圧縮率で画像を軽量化できます。
ただし主要ブラウザへの対応は Chrome の Firefox のみで Edge や Safari にはまだ対応できていません。

ブラウザの対応状況（2022年5月現在）

ほぼ全ての主要ブラウザに対応しています。
唯一 Safari は最近対応したこともあり、古いブラウザに対応していないことがあります。
Mac Safari なら Mac OS 11 以上の Safari 14.0 以降、iOS Safari なら Safari 14.0 以降のみ対応しています。
しかしおよそ 95% のブラウザで WebP はサポートされています。

WebPの作成方法

GIF、JPEG、PNG から変換して作成する方法と、デザインソフトから書き出す方法があります。

Squoosh を使った WebP 作成方法

ここでは Squoosh というツールを使って簡単に変換する方法を紹介します。
他の圧縮ツールでは画像圧縮したときの画質の劣化は途中でわからないのですが、Squoosh を使うと劣化率を見ながら圧縮をすることができます。

画像形式は WebP を選択します。WebP v2 ではありません。

画像を見ながら Effort（圧縮率）と Quality（画質）を調整し、右下のダウンロードボタンをクリックすると保存されます。

Squoosh の欠点

手軽で快適に動作する Squoosh ですが、画像を一括で指定できないという欠点があります。
一括で画像処理をするには Squoosh-CLI というコマンドラインで動くツールを利用します。
Squoosh-CLI を使って画像を一括で指定する方法はこちらの記事に書きました。
【Windows版】 Squoosh-CLIで画像を一気にWebP化しよう

Photoshopを使った WebP 書き出し方法

Photoshop のバージョン 23.2 （2022年2月リリース）から WebP がサポートされ、標準で WebP の書き出しができるようになりました。
保存するには「コピーを保存（別名で保存ではなく）」からファイルの種類を WebP に指定して保存します。

Photoshop のバージョン 23.1 以前の場合はプラグインを入れると WebP に対応できます。
Photoshop で WebP ファイル形式を簡単に操作できるようになりました。

WebPはどれくらい軽い？

どれくらい圧縮できるかは画像によるのですが、さきほどのカメラの画像は

オリジナル：4.8MB
JPEG：435KB
WebP：279KB

という圧縮結果になりました。

WebPの指定方法

HTMLでの指定方法

WebP を表示するには JPEG や PNG と同じ指定方法ですが、古いブラウザにも対応させたい場合画像を出し分けるという方法が有効です。
対応ブラウザは WebP を表示、対応していないブラウザは JPEG を表示のように、ブラウザごとに適切な画像を表示させます。
ここでは picture タグを使った出し分ける方法を紹介します。
picture タグは以下のように指定します。

<picture>

    <source srcset="/img.webp" type="image/webp">

    <img src="./img.jpg" alt="">

</picture>

画像の遅延読み込みをしたい場合は img タグに loading="lazy" を設定します。

CSSのbackground-imageでの対応

Modernizr というプラグインを使うと WebP が使用できるかどうかを調べてくれます。
「webp」「no-webp」というクラスを html タグに追加してくれるので、それに応じて CSS を書き換えます。

.webp {

    background-image: url(./img.webp);

}
.no-webp {

    background-image: url(./img.jpg);

}

WebP が使える場合は WebP が、使えない場合は JPEG が表示されます。

実際には速くなったのか？

弊社のメインビジュアルも WebP にすると高速化したのか試してみました。

PageSpeed Insights での結果

	JPEG	WebP
スコア	52	61
First Contentful Paint（FCP）	3.6s	3.3s
Speed Index（SI）	4.9s	4.1s
Largest Contentful Paint（LCP）	8.2s	7.9s
Time to Interactive（TTI）	5.8s	5.4s
Total Blocking Time（TBT）	400ms	220ms
Cumulative Layout Shift（CLS）	0	0

ファーストビューの画像を軽量化したことにより、各指標が良化しました。

Chrome DevTools の Performance での結果

Chrome デベロッパーツールのパフォーマンスタブでも計測してみます。

JPEG

WebP

PageSpeed Insights の結果とは違い、LCP のタイミングはそれほど変わっていませんが、FCP のタイミングが早まったという結果になりました。