画像配信効率
画像データをどのくらい効率よく配信できているか
画像配信効率の良いサイトと悪いサイトでは最大31倍の差
画像データは、ユーザーに配信したい大きさと画質を担保できるのであれば、できる限り軽いデータ量で送ることが理想です。しかし、調査対象のECサイトでは、同じ解像度の画像を配信するのに必要なデータ量に最大31倍もの差がありました。フォーマットの選択、圧縮品質の設定、次世代フォーマットの活用度——画像データの効率的な扱いについて、ここでは詳しく分析していきます。
画像配信効率とは
ウェブサイトやページによって、掲載する画像の数や大きさ、解像度は大きく異なります。これらは目視である程度わかりますが、サイトによって画像をいかに効率よく少ないデータ量で配信しているかにも、見えないところで実は差があります。ここではその差をサイト間で比較します。
比較の指標として、一定の解像度(ピクセル数)を配信するためにどれだけのデータ量を費やしているかを用います。本調査ではこれを 画像配信効率 と呼びます。
具体的には、1メガピクセル(1,000×1,000ピクセル相当)あたりの平均データ量 (KB/Mpx) でサイトを評価します。値が小さいほど、同じ解像度の画像をより少ないデータ量で配信できていることを意味します。
比較対象のフォーマット
本調査の画像配信効率は、静止画のラスターフォーマット(JPEG・PNG・WebP・AVIF)を対象としています。以下のフォーマットは比較対象から除外しています。
- GIF — 主にアニメーション用途で利用されるフォーマットです。アニメーション GIF はフレーム数やループ再生の有無によってファイルサイズが大きく変動するため、静止画と同じ「解像度あたりのデータ量」で単純に比較することができません
- SVG — ベクターフォーマットであり、ピクセル解像度に依存しない表現形式です。拡大・縮小しても画質が劣化しないため「1メガピクセルあたりのデータ量」という指標がそもそも適用できません
なぜ画像配信効率が重要なのか
画像配信効率が高い(=データ量が少ない)ことは、複数の観点でメリットがあります。
- ユーザー体験の向上 — ページの読み込みが速くなり、モバイル環境でも快適な閲覧体験を提供できます。通信データ量の削減はユーザーの通信コスト負担を軽減します
- インフラコストの最適化 — クラウドやCDNを利用する企業にとって、転送データ量の削減はそのまま配信コストの最適化につながります
- サステナビリティ — 少ないデータ量での配信は、サーバー・ネットワーク・端末それぞれにおける電力消費の効率化を意味します。必要な画像情報を、より少ないエネルギーで届けられているということです
効率の良いサイト Top 20
画像配信効率(KB/Mpx)の値が小さい上位20サイトです。値が小さいほど、少ないデータ量で画像を配信できています。
最も効率の良いサイトと最も効率の悪いサイトの間には31倍の差があります。 同じ解像度の画像であっても、画像データの扱い方——ファイルフォーマットの選択、圧縮品質の設定、次世代フォーマットの活用度——によって、これほど大きな差が生じています。
1位の4℃公式オンラインショップは1メガピクセルあたり33KBと、群を抜く配信効率を実現しています。 ジュエリーという商材の特性上、商品画像は小さなモチーフに対して広い背景領域を持つことが多く、画像圧縮が非常に効きやすい構図です。 2位のNARUMIYA ONLINEは子ども服のECサイトで、Akamai Image Managerを利用し、画像の大半をWebP等の軽量な次世代画像フォーマットで配信しています。
上位サイトに共通する傾向として、WebP・AVIFなど軽量な次世代画像フォーマットを積極的に導入していることが挙げられます。 次世代フォーマットは同等の画質でJPEGやPNGよりも大幅にファイルサイズを削減できるため、採用するだけで配信効率が大きく改善します。 画像配信効率の上位サイトの多くは、CDNの画像最適化機能やビルドパイプラインでの自動変換を通じて、次世代フォーマットへの移行を進めています。
次世代フォーマットの普及状況についての詳しい調査は 次世代フォーマット に掲載しています。あわせてご参照ください。
効率の悪いサイト Bottom 20
逆に、画像配信効率の悪いサイトがこちらです。同じ解像度・ピクセル数の画像を配信する上でも、多くのデータ量を必要としています。
画像配信効率の悪いサイトに共通する傾向として、以下の要因が考えられます。
- 写真画像にPNG形式を多用している(JPEGに比べてファイルサイズが大きくなりやすい)
- JPEG画像の圧縮品質が過度に高く設定されている
- WebPやAVIFなど軽量な次世代画像フォーマットの導入がほとんど見られない
さらに詳しく
- カテゴリによって配信効率に違いがあるのか → カテゴリ間の比較
- 画像配信効率のばらつきはどんな分布を描くか → 分布と評価基準値
- 売上規模と配信効率に関係はあるか → 売上との相関性
- カテゴリごとにサイトの画像配信効率の違いを見たい → 左メニューからカテゴリを選択してください
全サイトのサマリー
調査対象の全284サイトを画像配信効率順に並べた一覧です。サイト名をクリックすると個別レポート、カテゴリをクリックするとカテゴリ別レポートに移動します。見出しをクリックするとソートできます。