画像をWebPにするとどのくらい軽くなるのか。導入を決める前にいちばん知りたいのはここだと思う。
一般的な数字はGoogleが公表している。ただし実際にどれだけ減るかは、画像とサイトによって大きく異なる。この記事では公称値と実測のずれを示したうえで、実際に変換して測るための無料の診断を紹介したい。
連載「詳説 LightFile Proxy」
AWS CloudFrontの後ろに置いて、既存のサイトを変えずに画像をWebPで配信する仕組みを説明する連載。
- サイトに手を加えず画像をWebPで配信する仕組み
- 拡張子は.jpgのまま中身をWebPにしてよいのか
- 画像変換のタイミングとその最適解
- 次世代画像フォーマットの採用でどのくらい画像が軽くなるか（本記事）
- WebP化によるデータ削減で見た目は劣化するか（9月29日公開予定）
- 画像のリンク切れを起こさない二重の障害対応（9月30日公開予定）
- 無駄な変換を避け高速に画像を配信するためのキャッシュ戦略（10月1日公開予定）
- その他の細かな特徴（10月2日公開予定）
- AWS純正のDITで代替できるか（10月3日公開予定）
- 料金体系（10月4日公開予定）
Googleの公称値は25〜34%
WebPを開発したGoogleは、公式サイトでこう説明している。
WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.
（可逆のWebPはPNGより26%小さい。非可逆のWebPは、SSIMで同等の画質になるJPEGより25〜34%小さい）
WebP変換の効果としてよく引用される数字だ。ここで注意したいのは条件で、同じ画質に揃えて比べたときの、画像1枚あたりの差を指している。
実際の削減率は画像によってもサイトによっても違う
実際の画像で測ると、この数字どおりにはならない。次の例は、診断にかけたバナー画像1枚の結果だ。
184kBが82.7kBになっていて、削減率は54.9%になる。公称値の倍近い。
理由は元の画像にある。公称値は同じ画質に揃えた比較だが、実際のサイトに置かれている画像は、必要以上に高い品質で書き出されていたり、表示サイズより大きな解像度のまま置かれていたりする。そのぶんが削減に乗る。逆に、すでに十分に軽量化された画像なら削減率は小さくなり、場合によってはWebPにすると大きくなる。
だから「WebPにすると何%軽くなる」という一般論を自社に当てはめても、判断の材料にはならない。自分のサイトの画像で測るほうが早い。
自分のサイトを測る無料の診断
画像最適化 無料診断は、ページのURLを入れると、そのページが配信している画像を実際に取得して変換し、画像ごとの削減率をレポートにする。
やることはURLを入れるだけになる。アカウントの登録は要らず、サイト側に何かを設置する必要もない。1分ほどでレポートができる。
変換は3通りを試す。WebPへの変換、AVIFへの変換、そしてフォーマットを変えずにJPEG・PNGのまま軽くする最適化だ。
レポートの先頭には、そのページ全体の集計が出る。
この例ではWebPで74.8%減っている。
その下の目盛りは画像配信効率で、他のサイトと比べて画像の使い方がどれだけ効率的かを表す。画像は表現したい内容によって解像度（ピクセル数）が違うが、同じ解像度と画質ならデータ量は小さいほうがよい。そこで1メガピクセル（1,000×1,000ピクセル相当）あたりのデータ量で測る。
弊社はこの値をECの284サイト・1,404ページで観測し、分布を5つに区切ってとても軽い・やや軽い・ふつう・やや重い・とても重いの基準を作った（EC画像最適化白書 画像配信効率の分布）。自分のサイトが他と比べてどのあたりにいるかが分かる。
レポートのどこを見るか
レポートには3通りの結果が並ぶ。このうちLightFile Proxyの効果として読めるのはWebPの欄だけになる。
LightFile Proxyが配信するのはWebPで、AVIFは出力しない。従来フォーマットのままの最適化も別の製品の領分になる。3つの数字のうち最も良いものを見てしまうと、実際より大きな期待を持つことになる。
変換の条件はほぼ揃えてある。診断のWebP変換はJPEGをquality 80の非可逆、PNGを可逆で変換していて、ここはLightFile Proxyと同じだ（GIFだけは診断が非可逆、LightFile Proxyは可逆という違いがある）。画質の扱いについては(5) WebP化によるデータ削減で見た目は劣化するかで詳しく書いている。
実際の配信は診断より控えめになる
診断の数字は、そのページの画像を全部WebPにしたときの削減率になる。実際の配信では次の理由で少し下がる。
- WebPにすると大きくなる画像は、オリジナルのまま配信する。 弊社が本番の画像700枚で確かめたところ、21枚（3%）がこれに当たった
- 10MiBを超える画像と、JPEG・PNG・GIF以外の形式は変換しない。 オリジナルをそのまま配信する
- WebPに対応していないアクセスにはオリジナルを返す。 対応率は95%を超えているが、ゼロではない
- 1回目のアクセスはオリジナルになる。 変換は応答の外で走る（(3) 画像変換のタイミングとその最適解）
診断の数字は上限に近いものとして読んでおくのがよい。
ECの284サイトではどうだったか
1サイトだけ測っても、その数字の位置づけが分かりにくい。弊社は国内のECサイトを対象に、同じ診断で一斉に測った調査をEC画像最適化白書として公開している。ここから傾向を見ておきたい。
まず、これらのサイトがいま何を配信しているか。
画像リクエストに占めるWebP・AVIFの割合が10%に満たないサイトが134サイトあり、全体の47%を占めている。半数近くのサイトは、いまだに画像のほとんどをJPEG・PNG・GIFで配信している。
この134サイトについて、画像をWebPに変換するとどのくらいの削減が見込めるかをシミュレーションしたのが以下の結果だ。
- 中央値は 51.9%
- 4分の3のサイトが41.4%以上
- 86%のサイトがGoogleの公称値の上限（34%）を超えている
- 最も大きいサイトで88.8%
灰色の2本がGoogleの公称する25〜34%の範囲にあたる。その範囲に収まるサイトは少数で、実際にはもっと大きな削減が見込める。
公称値より大きくなるのは、元の画像に余裕があるからだ。診断のWebP変換はJPEGをquality 80に揃えるので、それより高い品質で書き出されていた画像は、フォーマットの差に加えて品質を揃えたぶんも減る。フォーマット変換の効果だけを取り出した数字ではないという点は、正確に読んでおきたい。
しかもquality 80は、やや品質を重視した設定になる。これよりさらに削減できる余地は残っている。
予測するより測ったほうが早い
統計的な傾向としては、JPEG・PNGのまま配信しているサイトなら半分前後まで減ることが多い。ただしいちばん小さいサイトで19.7%、大きいサイトで88.8%と幅が広い。自分のサイトがどのあたりに来るかは、分布を眺めていても決まらない。
診断は無料で、URLを入れて1分ほど待てば終わる。あれこれ予測するより、実際に変換して測ってしまったほうが早い。