次世代フォーマットでの画像の配信

PageSpeed Insightsが指摘する改善項目の中に「次世代フォーマットでの画像の配信」というものがあります。画像のファイルフォーマット(とうやって画像をデータとして記憶するかの方式)にはいくかの種類があります。その中で「WebP」「JPEG2000」「JPEG-XR」が次世代フォーマットと呼ばれるものです。

現在よく使われている画像フォーマットとしては「JPG(JPEG)」、「GIF」、「PNG」があります。これらのフォーマットと比べた際の次世代フォーマットの違いは画像の圧縮率の高さになります。

圧縮率が高いということは、大きくてきれいな画像を小さなデータで保存したり、通信環境の悪い状況でもWebページを高速に表示できるということです。

↑目次

圧縮とは

旅行をするときに、着替えや服を圧縮袋にいれて空気を抜いてギュウギュウにして旅行鞄に詰めた経験はありませんか。画像の圧縮も同じです。

画像のデータはそのままだと非常に大きいため、データとして保存する際に、圧縮とよばれる処理をおこない元のデータより量を少なくして保存します。そして表示する際に、圧縮したデータを元にもどして表示するようになっています。このとき圧縮しデータを保存する方式にいくつかの方法があります。どの方法で保存されているかは、ファイルの拡張子をみればわかるようになっています。拡張子とはファイル名のドットの後についているもので、そのファイルの種類を表します。

たとえば「.jpg」もしくは「.jpeg」だったらJPEG形式で保存されていますし、「.png」であればPNG形式で保存されています。「.gif」はGIF、「.bmp」はBMPとよばれる無圧縮の保存方式です。次世代画像フォーマットの「.webp」は「WebP」、「.jp2」「.j2c」「.j2k」「.jpf」「.jpx」「.jpm」「.mj2」「.jph」の拡張子は「JPEG2000」、「.hdp」「.wdp」「.jxr」の拡張子は「JPEG-XR」フォーマットになります。表にまとめると以下のようになります。

画像フォーマット	拡張子
BMP	.bmp
JPEG	.jpg, jpeg
GIF	.gif
PNG	.png
WebP	.webp
JPEG2000	.jp2, .j2c, .j2k, .jpf, .jpx, .jpm, .mj2, .jph
JPEG-XR	.hdp, .wdp, .jxr

それぞれの保存形式には長所、短所があります。この記事ではWebページの表示時間短縮を主題にしていますので、ブラウザでの対応状況が一番の課題。そして現在使っているJPEG形式やPNG形式からどれだけデータを小さくできたかが重要です。

↑目次

ブラウザの対応状況

次世代フォーマットにおけるブラウザの最新バージョンでの対応ですが以下のようになっています(2021/05現在)。

フォーマット	IE11	Edge	Chrome	Firefox	Safari
WebP	×	○	○	○	○
JPEG2000	×	×	×	×	○
JPEG-XR	○	×	×	×	×

参考
https://caniuse.com/?search=JPEG%202000
https://caniuse.com/?search=WebP
https://caniuse.com/?search=JPEG-XR

これを見るとWebP以外の選択肢がないことがわかります。IE11はすでに終わっているブラウザでありWindowsにはEdgeが搭載されているため、わざわざIE11を使う必要性はないでしょう。

↑目次

WebPと既存フォーマットとの圧縮率の違い

圧縮率は元々の画像データをどれだけ小さくできるかというものです。参考までに、このWebサイトのトップページの写真画像データがどの程度圧縮されるか比較してみます。

フォーマット	データサイズ(byte)	圧縮率
BMP	1171338	100%
GIF	202238	17%
PNG	573760	49%
JPEG	114806	10%
WebP	92606	8%

この結果を見てみるとWebPの圧縮率が非常に高いことがわかります。元の8%、JPEGよりもさらに2割ほど圧縮率が高くなっています。この差が丸々データ転送量(転送時間)の差になってきます。Webページのデータは文字よりも画像データのほうが量が大きいことが多いため、PNGやJPEGをWebPに変更するだけで、かなりの速度向上を見込めます。逆にIE11のユーザが多い環境の場合には、IE11対応するために、JPEGのままとしておき2割程度のデータや転送時間の増量は目を瞑るという選択肢もあります。

↑目次

WebPへの変換方法

一番楽なのはWeb上の画像変換サービスを使う方法です。
Squoosh
画像をドラックアンドドロップするとエディタ画面になります。

エディタ画面の左側は圧縮前の元画像、右側は圧縮後の画像が表示されます。左側と右側の画像を仕切るバーは左右にスライドすることができます。

エディタ画面の右側のCompress欄のフォーマットで「WebP」を選択し品質を0～100の間で選択し右下にあるダウンロードボタンを押すことでWebPに変換することができます。

そのほか、Gimpと呼ばれるフリーの画像編集ツールを使う方法やPhotoshopにプラグインを入れる方法もあります。

大量の画像を一括して変換したい場合もあるかもしれません。そのような場合はバッチを書いてコマンドラインで一括変換したくなるかもしれません。そのような場合には、Google DevelopersのDownloading and Installing WebPでWebPへのエンコーダやデコーダ、ビューアーなどが用意されているのでそれを使うのが良いとおもいます。コマンドラインに関する知識が必要になるため難易度は若干あがりますが、大量の画像を一括で処理したいときにおすすめです。

↑目次

まとめ

既存の画像フォーマットをWebPにすると容量が非常に小さくなることがわかったと思います。既存のフォーマットに囚われず、Webページに画像を掲載する際には次世代フォーマットも含めて検討してみると良いとおもいます。

↑目次