「次世代フォーマットでの画像の配信」ってどうすればいいの？

※2023年5月2日に最新の情報に更新しました

Google PageSpeed InsightsでWebサイトのスピードを計測した際「改善できる項目」に「次世代フォーマットでの画像の配信」と表示されることがあります。 そもそも「次世代フォーマットでの画像」とは具体的にどんなものかご存知でしょうか。 この記事では「次世代フォーマットでの画像」の概要と、実際の対応方法をご紹介していきます。

「次世代フォーマットでの画像」とは

現在、Webサイトで使用されている画像はJPG、GIF、PNGなどが一般的です。 しかしGoogle PageSpeed Insightsでは、WebP やAVIFなどの画像フォーマットの使用がページの表示速度向上に繋がると推奨されます。 たしかに、Webサイトを見ているときページが早く表示されればイライラしませんし快適に閲覧できますよね。では、具体的に「次世代フォーマットでの画像」がどんなものなのかご紹介します。

1）WebP（ウェッピー）

WebPは、Googleが開発している静止画フォーマットです。ファイルの拡張子は「.webp」。JPEGやPNGの画像データをそれぞれ30％程度圧縮できるといわれています。アニメーションの表現もでき、PNGのような透過表現にも対応しています。

-ブラウザごとの対応状況（2019年11月時点）

※2019年11月19日現在 参照：https://caniuse.com/#search=WebP

上の表の赤色部分が未対応のブラウザ、緑色が対応しているブラウザです。2019年11月時点でWebPはIE、Safariが未対応のため、iPhoneユーザーの多い日本ではWebPを閲覧できるユーザーは35%程度でした。閲覧できないブラウザでは、JPGやPNGなど別の画像を表示させる対応が必要でした。しかし・・・

-ブラウザごとの対応状況（2023年5月時点）

※2023年5月2日現在 参照：https://caniuse.com/#search=WebP

2023年5月現在ではIEを除く全てのブラウザがWebPに対応しました。IEの公式サポートは2022年6月に終了したため、次世代フォーマットでの画像としてWebPが最有力選択肢となりました。

2）AVIF

AVIFはWebPよりもさらに軽量で高品質な画像フォーマットです。WebP同様、アニメーションや透過の表現にも対応しています。画質を落とすことなくページの表示スピードを向上できるなんて、理想的ですよね。現在のカバー率はおよそ84%、EdgeとIE以外の主要ブラウザではほとんど対応しています。閲覧できないブラウザでは、JPGやPNGなど別の画像を表示させる対応が必要です。

-ブラウザごとの対応状況

※2023年5月2日現在 参照：https://caniuse.com/?search=AVIF

3）JPEG 2000

JPEG 2000は、JPEGの進化版のような位置づけで2000年ごろに公開されました。JPEGよりも高性能で、表現力も高いです。拡張子は「.jp2」「.j2c」「.j2k」「.jpf」「.jpx」「.jpm」「.mj2」「.jph」。 従来のJPEGでネックとなっていた可逆圧縮ができるようになっています。

-ブラウザごとの対応状況

※2023年5月2日現在 参照：https://caniuse.com/#search=JPEG%202000

現在のカバー率はおよそ19%、Safariのみ対応しているためWindowsやAndroidのユーザーを想定すると導入は好ましくありません。またその表現力の高さゆえ、画像処理の負担が大きく、画像点数の多いサイトには向きません。 AVIF同様、閲覧できないブラウザへの対応が必要になります。また、2019年時点でWebPに非対応だったSafariがWebPに対応したことで、よりWebサイトでの利用シーンは限定的になっていくと予想されます。

次世代フォーマットの画像はWebPに軍配

各画像フォーマットのブラウザ対応状況を見ると、IE以外を網羅しているWebPが次世代画像フォーマットの主流となっていきそうです。では具体的にWebPの画像はどうやって作成するのかご紹介します。

まずはGoogleが運営している Squoosh（ https://squoosh.app/ )がおすすめです。ブラウザ上でドラッグ＆ドロップするだけでJ PGなどの画像をWebPやAVIFに変換することができます。有料のツールや専門スキルがなくても簡単に変換できる点でとても便利です。他の方法としてはPhotoshopでも2022年にWebPの書き出しに対応しました。
また、WordPressでは画像を自動的にWebPに変換してくれる「EWWW Image Optimizer」というプラグインもあり、サイト運営者にとってより手軽に次世代フォーマットの画像への対応ができるようになりました。

「次世代フォーマットでの画像の配信」への代替案

ここまで各画像フォーマットの概要を説明してきましたが、現時点では対応ブラウザがそれぞれ異なるためWebP 、AVIFなどの「次世代フォーマットでの画像の配信」は、ブラウザごとに画像を用意し表示し分けるという技術的な対応が必要です。 そこで、ページの表示速度を上げるための代替案を2つご紹介します。

代替案1）画像の数を減らす

不必要な画像がないか、Webサイトを見直してみましょう。 例えば文字を画像で表示したり、背景の装飾に大きな画像を使用したりしていないでしょうか。文字はできるだけテキストで表示させたり、過剰な装飾は避けるなど、ダウンロードに時間がかかりそうなコンテンツは画像以外の手段で表現できないか検討してみてください。 そしてユーザー目線に立って、その画像はユーザーにとって必要か、サイト運営側の自己満足で安易に画像化していないかをチェックし、不要なものを選別しましょう。

代替案２）画像のファイルサイズを最適化する

下記のサイトなどで画像を圧縮し、ファイル容量を小さくするとダウンロードにかかる時間を短縮できます。 https://tinypng.com/ https://www.iloveimg.com/ja/compress-image

また、JPEG・GIF・PNGなど画像ファイル形式によって得意・不得意な表現があるので、画像の内容によって適切なファイル形式を選ぶことも有効です。

• JPEG：圧縮率が高くフルカラーでの表現ができるため、写真向き。 画像データを小さくできるが、圧縮のたびに画質が劣化。
• GIF：色数が256色しかなくデータ容量が小さい。風景写真などは向かないが、単色のイラスト、ロゴ、ボタンなどに適している。透過やアニメーションの表現も可能。
• PNG：8bitは256色でイラストやロゴ向き。24bitならフルカラー表現やアルファチャンネルにも対応できる。圧縮しても画質は劣化しない。比較的新しい形式のため、古い端末、ブラウザには対応外のものがある。

まとめ

「次世代フォーマットでの画像の配信」を行えば、ページの表示速度を改善することはできるでしょう。この記事を投稿した2019年にはブラウザごとにバラバラだった画像フォーマットへの対応状況が、ほぼWebP主流化へ変化し、さらにAVIFという選択肢も増えました。刻々と進化するWebの技術や情勢を常に注視し、最適な対応を取れるようにしていきましょう。