WebPで画像軽量化！pictureタグでの非対応ブラウザ対策

ページの表示速度や画像の読み込みを高速化する上で、画像ファイルの軽量化は欠かせません。
圧縮やリサイズ、適切な画像ファイル形式の使用などにより、一つ一つの画像ファイル容量を小さくすることが重要です。

今回は様々な画像ファイル形式の中でも、超軽量なファイル形式である「WebP（ウェッピー）」について解説します！

WebPは、Googleが2010年9月に発表した画像ファイル形式であり、次世代フォーマットと呼ばれています。
JPEGやPNGと比較して、高い圧縮率と高品質な画像を提供することができる他、動画やアニメーションなどの多様な画像形式をサポートしているため、GIF形式のように使用することも可能です。

Page Speed Insightsで、改善できる項目に「次世代フォーマットでの画像の配信」が表示された場合、WebP形式への画像変換を行うことで、さらなるパフォーマンス改善が見込めます。

WebP画像のメリット・デメリット

WebP画像のメリット

① ファイルサイズを小さくできる

一番のメリットはやはり、従来のJPEGやPNGよりもファイルサイズを小さくできることです。
WebP開発元であるGoogleの公式サイトでは、以下のように記述されています。

WebPのロスレス画像については、PNGと比較して26%縮小されています。WebPのロッシー画像は、同等のSSIM品質インデックスで、同等のJPEG画像より25～34%小さくなります。

ウェブ用の画像形式  |  WebP  |  Google Developers

（ここでいうロスレス画像とは可逆圧縮形式、ロッシー画像は非可逆圧縮形式で保存した画像のことを指しています。）

現在では、Retinaなどの高解像度ディスプレイに対応するためにサイズの大きい画像を使用するのが一般的なため、ファイルサイズを小さく抑えられるWebPの恩恵はとても大きいです。

② 非可逆圧縮と可逆圧縮の両方に対応している

従来の画像ファイル形式では、JPEGは非可逆圧縮、PNGは可逆圧縮の形式でした。
WebPでは、この両方の形式をサポートしているため、画像の特徴によって非可逆圧縮・可逆圧縮を使い分けることで、外観の品質を保ちながらファイルサイズを小さくすることが可能です。

JPEG向きの色数の多い画像などは非可逆圧縮のWebP、PNG向きの色の境界をくっきり見せたい画像などは可逆圧縮のWebPで保存すると良いでしょう。

非可逆圧縮向きの画像

可逆圧縮向きの画像

JPEGやPNGなど従来の画像形式の使い分けについては、以下の記事で詳しく解説しています。

③ 透明度を扱うことができる

PNGと同じく、透明色を表現することができます。
さらに、WebPでは非可逆圧縮の形式でも透明色を扱えることが特徴です。

例えばJPEG向きの色数の多い写真などをくり抜き、背景を透過させて使用したい場合に真価を発揮します。

PNG：153kB

WebP（非可逆圧縮）：13kB

JPEGは透明を表現できないため、従来はこういった画像はPNGを使わざるを得なかったのですが、色数が多いためにPNGではファイルサイズが大きくなってしまいがちです。

しかし、非可逆圧縮のWebPを使用することで、JPEGのようにファイルサイズを非常に小さくしながら透明色を扱うことが可能になります。（上記の例ではPNGと比較して1/10以上も容量を削減できています）

WebP画像のデメリット

① 非対応ブラウザ対策の手間がかかる

WebPは2010年に発表された比較的新しいファイル形式のため、非対応のブラウザも存在します。例えばSafariの場合、”iOS14″以降、Macでは”macOS 11 Big Sur”以降でないとサポートされていません。

そのため、WebP画像を使用する場合、現状では非対応ブラウザへの対策が必須となります。

• WebP形式の画像と、非対応ブラウザ用の従来の画像形式の２種類を用意する
• pictureタグでブラウザに応じて最適な画像を出し分ける実装をする

といった手間が生じるため、従来の画像形式のように気軽に扱えません。

② WordPressはWebP非対応ブラウザ対策をしない

WordPressはバージョン5.8から、メディアライブラリにWebP画像をアップロード可能になりました。

ただし、画像ブロックなどで、メディアライブラリのWebP画像を呼び出した場合、imgタグによって出力されるだけで、pictureタグ等を使った非対応ブラウザ対策は行われません。

そのため、非対応ブラウザもサポートしたい場合は、カスタムHTMLでpictureタグを記述したり、WebP対応のためのプラグインを使用する必要があります。

WordPressでWebP対応するための方法は、以下の記事で詳しく解説しています。

③ デザインツールに標準対応していない場合がある

画像編集ソフトやデザインツールなどがWebPに標準対応していないケースがあります。

例えば、FigmaでWebP形式の画像を書き出すには、Olive Pressというプラグインをインストールする必要があります。

Adobe illustratorやAdobe Xdでは、標準サポートも対応化のプラグインもないようです（2023年4月時点）

Adobe Photoshopの場合、Photoshop 23.2 からWebPが標準でサポートされるようになりましたが、それ以前のバージョンではWebPShopというプラグインをインストールする必要があります。

画像をWebP形式へ変換する方法

SquooshでWebP形式へ変換する

画像をWebPへ変換する方法は様々ですが、このブログではSquooshによる変換をおすすめしています。

Squooshは、Web上で画像の圧縮、リサイズ、ファイル形式の変換をすることができる非常に便利なサービスです。
基本的な使用方法などは以下の記事で解説しています。

SquooshではJPEGやPNGだけでなく、WebP形式への変換が出来るのと同時に、高品質な圧縮によってファイルサイズを非常に小さくすることが可能です。

画像をアップロードしたら、画面右側のファイル形式のセレクト部分で「WebP」を選択することで、WebP形式への変換が可能です。

デフォルトでは非可逆圧縮になっていますが、「Lossless」の部分のチェックを入れることで、可逆圧縮にすることが出来ます。画像の特徴に合わせて使い分けましょう。

「Effort」を高くすることで、より労力をかけてファイルサイズを抑えてくれますが、圧縮にかかる時間は長くなります。

非可逆圧縮の場合は、「Quality」を変更することで、出力後の画像の品質を自由に調整することが可能です。

試しに元のファイルサイズ544kBのJPEG画像を、①MozJPEG、②WebPの２形式で圧縮してみました（品質は同じく75です）。

MozJPEG：221kB（59%減）

WebP：157kB（71%減）

MozJPEGの時点で59%もの削減が出来ましたが、WebPにすることでさらに12%ファイル容量を削減することが出来ました。

変換の際の注意点

非可逆圧縮と可逆圧縮を適切に使い分けることが大切です。
特に、イラストやロゴ系のPNGを非可逆圧縮のWebPに変換してしまうと、元のファイルより際立って画質が荒くなってしまったという事態になりかねません。そのような画像は可逆圧縮が適しています。

また、何でもWebPにすればファイル容量が小さくなる訳でもありません。
透過画像などはWebPにする事で大きなファイル容量削減が見込めますが、写真などはMozJPEG変換で十分な場合もあります。

WebP画像を使用するための工数とファイル容量の削減効果を比較し、WebP画像を採用する価値があるかどうか判断することが大切です。

pictureタグによるWebP非対応ブラウザ対策

pictureタグの使い方

Web上でWebP形式の画像を表示させる際は、現状は非対応ブラウザへの対策が必須になります。

「WebP形式の画像」と「従来のJPEG等のファイル形式の画像」の２パターンの用意が必要です。
pictureタグを使用することで、WebP形式に対応しているブラウザにはWebP画像を、非対応のブラウザには従来のファイル形式の画像を出し分ける実装が可能です。

例えば、以下のように記述します。

<!-- 例 -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="" width="640" height="360">
</picture>

pictureタグは任意の個数のsourceタグと1つのimgタグで構成されます。

sourceタグにはtype属性やmedia属性で任意の表示条件を指定し、その条件にマッチした場合に表示したい画像パスをsrcset属性に記述します。
一番上のsourceタグから順に読み込まれ、表示条件とマッチしなかった場合は次のsourceタグの評価に移ります。最終的にどのsourceタグとも表示条件がマッチしない、もしくは画像が見つからなかった場合は、imgタグに記述した画像が表示されます。（IEなどpictureタグをサポートしていないブラウザでもimgタグの画像が表示されます）

type属性にはsrcset属性に指定したファイルのMIMEタイプを記述します。（例えば画像ファイルの場合はimage/jpeg、image/webpなど）

type属性に指定した形式をブラウザがサポートしていれば、同sourceタグ内のsrcset属性の画像が表示されます。
そのため、上記のコードでは、WebP形式をサポートしているブラウザでは”image.webp”が、非対応ブラウザでは”image.jpg”が表示されます。

今回はtype属性によって画像の表示条件を指定しましたが、他にはmedia属性を使用することで、画面幅の大きさによって表示する画像を切り替えることも可能です。
詳しくは以下の記事で解説しています。

表示確認をする

実際にWebP形式の画像が読み込まれているかは、Chromeの検証ツールを使用する事で確認することができます。
（検証ツールは、Macの場合option+command+I、Windowsの場合はCtrl+Shift +IもしくはF12で開けます。）

検証ツールを開いたら、「Network」タブをクリックしてページをリロードすると、ページで読み込まれるリソースが一覧表示されます。

pictureタグに記載した画像ファイルのTypeが”webp”になっていれば、WebP形式の画像が正しく読み込まれている証拠です。

まとめ：軽量な画像フォーマットWebPを上手く使い、ページを高速化しよう

WebPの特徴、WebPへの変換方法、pictureタグを使用したWebP画像の表示方法について解説しました。