公開日:

「画像を軽くして」と言われたときの定量的な基準

Authors
  • Name

Web制作の現場で「画像を軽くして」と言われることはよくある。一枚一枚人間の目で品質やパラメータを調整すれば軽くすることは可能だが、現在のWeb制作でそこまで手間をかけるのはほぼ不可能だ。

もし他のサイトと比べて遜色ない、あるいは十分に軽いといった定量的な基準があれば、ひとつの判断材料になるだろう。機械化した工程の中でもパラメータの妥当性を評価しやすくなる。

先日、主要なECサイトの画像の使われ方を徹底調査した「ECサイト画像白書 2026」を公開した。この調査で用いた画像配信効率という指標と、そこから導き出した5段階の評価基準が、「画像を軽くして」への定量的な答えになると考えている。


画像配信効率という指標

コンピュータデバイスで表示する画像はピクセルに支配されている。画像の大きさ=解像度であり、一定の解像度の画像を配信するためにどれだけデータ量を費やしたか——それが画像の配信効率だ。

この調査では、1メガピクセル(1000×1000=100万画素)あたりのデータ量(KB/Mpx)でこれを数値化した。1メガピクセルという単位に深い意味はなく、100万画素・1000×1000という解像度がイメージしやすく語呂がいいので便宜的に採用しただけだ。

計算例

  • 200KBで2メガピクセル(2000×1000px)の画像 → 100KB/Mpx
  • 500KBで1メガピクセル(1000×1000px)の画像 → 500KB/Mpx

数値が小さいほど、少ないデータ量で多くの画素を表現できている。解像度の異なる画像でも同じ基準で比較できるのがこの指標の利点だ。

画像配信効率のばらつきと対数正規分布

調査対象1,404ページのデータを分析したところ、サイトによって画像配信効率に想像以上の大きなばらつきがあることがわかった。

画像配信効率の対数正規分布

最も多く見られるのは88〜172KB/Mpxの範囲だが、ページによってはその20倍近い1,600KB/Mpxに及ぶケースもある。同じ解像度の画像を配信するのに、これだけデータ量に差があるということだ。

このばらつきは、数学的に対数正規分布で説明できそうだ。Kolmogorov-Smirnov検定でも統計的に妥当という結果が出ている。詳しくは「ECサイト画像白書 2026 - 画像配信効率の分布」を参照してほしい。

対数正規分布は、Webサイトのスピード指標(ページ読み込み時間など)にも見られる分布パターンだ。どのサイトも、画像についてもスピードについても、意図的に間違った使い方をしようとしているわけではない。それぞれが正しいと思っている使い方をしている。それにもかかわらず、画像の配信効率にもWebのスピードにも同じように良し悪しのばらつきが生じる。その両方が同じ数式で説明できるというのは興味深い。

分布のパラメータは以下のとおりだ。

  • μ(対数平均)= 5.283
  • σ(対数標準偏差)= 0.738
  • 平均値:259KB/Mpx
  • 中央値:197KB/Mpx
  • 範囲:4〜1,684KB/Mpx

5分位による評価基準

理論的な分布と実測値の一致が見られたところで、画像配信効率に分かりやすい評価基準を設ける。ここでは画像配信効率を5分位(Quintile)で分類し、「とても軽い」から「とても重い」までの5段階とした。

評価KB/Mpx解説
とても軽い0〜111上位20%の効率
やや軽い111〜166
ふつう166〜236中央値(197KB/Mpx)を含む
やや重い236〜372
とても重い372〜下位20%の効率

「画像を軽くして」と言われたとき、この5分位がひとつの定量的な指標になる。約300サイトのECサイトという母集団から、統計的な根拠をもった画像の軽さ・重さの評価基準を導き出したものだ。

たとえば「画像が重い」と言われたときに、実際に画像の配信効率を計測してこの評価基準に当てはめてみる。その結果「ふつう」や「やや軽い」という評価が得られたとすれば、画像データが大きいというのは一種の思い込みである可能性がある。デザイナー・エンジニア・クライアントなど、あらゆるステークホルダーの間で定量的な指標として共有できる。それがこの基準の使い方だ。

注意

画像データが大きくなくても、通信上のボトルネックがあれば当然「画像が重い」という体感は正しいかもしれない。この指標は画像データの大きさを評価するものであり、体感的な重さ・軽さのすべてを説明できるものではない。

実際の画像で比較してみる

実際に同じ写真素材(1000×1000px、1メガピクセル)を異なるフォーマット・設定で変換し、配信効率を比較してみた。画像をクリックすると原寸で表示される。

写真素材のクレジット: UnsplashAngela Baileyが撮影した写真を正方形にトリミング

JPEG品質95でそのまま保存

JPEG品質95

まず、オリジナル写真を無造作にリサイズして品質95のJPEGで保存したもの。これが 384KB となり、先ほどの評価基準でいうと 「とても重い」 に分類される。

LightFileで最適化

JPEG LightFile容量優先

弊社が提供する画像最適化ツール LightFile で、品質設定を容量優先にして最適化すると 130KB に軽量化できた。こうなると 「やや軽い」 という評価になる。

WebPに変換

WebP品質75

次世代フォーマットではどうか。heavy.jpg をWebP(品質75)に変換すると 116KB「やや軽い」 という評価になる。

AVIFに変換

AVIFデフォルト

AVIFに変換すると 70KB まで削減でき 「とても軽い」 という評価になる。これ以上のデータ削減は可能かもしれないが、他のサイトと比較しても十分に軽量な画像になったと評価できる。

比較一覧

heavy.jpglightfile.jpgheavy.webpheavy.avif
フォーマットJPEG (品質95)JPEG (LightFile 容量優先)WebP (品質75)AVIF (デフォルト)
サイズ384KB130KB116KB70KB
KB/Mpx38413011670
評価とても重いやや軽いやや軽いとても軽い

おそらく、これらの画像を素で見比べて画質の良し悪しをすぐに指摘できるユーザーはほぼいないだろう。しかしデータ量にはこれだけの差が出ている。一見するとほぼ区別がつかないのに、最も重い heavy.jpg と最も軽い heavy.avif の間には5倍以上の開きがある。

画像単体よりもページ全体・サイト全体で評価する

ここまでは一例として画像1枚の配信効率を見てきたが、実際のWeb画像は描かれている内容によって圧縮のしやすさが大きく変わる。複雑な図案や細かいディテールの多い画像は圧縮しにくく、平坦な背景が多い画像は圧縮しやすい。

そのため、画像1枚1枚を厳密にこの基準で評価するよりも、1ページの中での全体の配信効率や、サイト全体での配信効率を評価する方が現実的だ。個々の画像にばらつきがあっても、ページ単位やサイト単位で見たときに「ふつう」〜「やや軽い」の範囲に収まっていれば、十分に健全な運用ができていると言える。

次世代フォーマットへの移行が鍵

次世代フォーマットを活用するサイトは少しずつ増えてきている。それに伴い、画像配信効率の全体的な水準はおそらく数年前と比べて改善されており、「軽い」「重い」の評価基準は少し厳しくなっていると想定される。

従来フォーマット(JPEG/PNG)のままでこの基準に追いつくのは難しく、次世代フォーマットへの移行が鍵となる。弊社の LightFile Proxy のように、CloudFrontのオリジンに設定するだけで画像を自動的にWebP/AVIF変換できるサービスもあるので、配信インフラの面でも導入のハードルは下がってきている。

まとめ

「画像を軽くして」という要望に定量的に向き合うための指標として、画像配信効率(KB/Mpx)と5分位による評価基準を紹介した。

  • 画像配信効率には法則的な分布が見られそうである
  • 5分位の基準で「やや重い」「とても重い」に該当する場合は改善の余地がある
  • 次世代フォーマット(WebP, AVIF)の活用が、配信効率改善の最も確実な手段

この基準があれば、デザイナー・エンジニア・クライアントの間で「どこまで軽くすればいいか」の認識を揃えやすくなる。感覚的な議論を、データに基づいた議論へと移行するための出発点として活用してほしい。