ここにファイルをドロップ、または選択してください

Webサイトに「正解のサイズ」は1つではなく、その画像がページ内でどんな役割を担うかによって適切な数値は変わります。ここでは代表的なケースの目安と、その根拠を整理し、リストにない場合にも応用できるようにします。

役割別の目安表

役割 幅 目標ファイルサイズ
ヒーロー・全幅バナー 最大1920px 200KB以下
ブログ・本文中の写真 800〜1200px 100KB以下
商品詳細ページのメイン画像 800〜1200px 150KB以下
商品・一覧グリッドのサムネイル 300〜500px 50KB以下
著者アイコン・小さいアイコン 200〜400px 20KB以下
ロゴ(ラスター画像の場合、SVGでない場合) 実際の表示サイズの2倍 20KB以下

これらの目安は、すでに画像がその役割にとって妥当な最大幅までリサイズされていることを前提としています。解像度の上限を決めずにファイルサイズだけ目標を決めても、あまり意味がありません。解像度を必要以上に小さくすれば、どのみち小さいファイルサイズは達成できてしまうからです。

なぜ全幅画像は1920pxが実用的な上限なのか

1920pxを超える幅で画像を配信するということは、ほとんどの訪問者の実際の画面幅を超えたピクセル情報をエンコードしていることになります。大きなモニターであっても、ブラウザウィンドウはネイティブ解像度いっぱいで表示されないことが多く、いずれにせよCSSが画像をコンテナに合わせて縮小表示します。この縮小表示はダウンロードするファイルサイズを減らしてはくれません。全体のファイルはまず縮小前のサイズで転送されてから、見た目だけ縮小されます。元画像を実際に表示される最大幅に合わせておくことが、不要なページ容量を減らす大きなポイントです。

Retina・高DPI画像は選択的に使う

2倍解像度の画像(同じ表示サイズでピクセル数を倍にした画像)は、近距離でシャープさが重要な要素(ロゴ、アイコン、文字を重ねたヒーロー画像)では高DPIディスプレイでの見え方が明確に改善します。一方、通常にスクロールしながら閲覧する一般的な写真コンテンツでは、多くの人が1倍と2倍の違いを意識的には感じ取れませんが、ファイルサイズのコストは実際に(ほぼ倍に)発生します。現実的な方針としては、シャープさが重要な小さい要素(ロゴ・アイコン)には2倍を、それ以外の大きな写真コンテンツはしっかり圧縮した1倍を使い、ほとんど知覚できないシャープさのために容量を倍にする価値があるかを見極めることです。

グリッド表示は積極的な圧縮が向いている

商品や記事の一覧グリッドは、一度に多くの画像を表示するため、個々の画像に対する視線は一瞥程度で終わります。これはまさに、積極的な圧縮(単独のヒーロー画像より低いファイルサイズ目標)による見た目への影響が最も小さく、累積的なメリットが最も大きくなる状況です。ページ全体の容量は表示する画像枚数に比例して増えるためです。

srcsetを使うと「1つのサイズ」から「サイズの集合」の話になる

サイトがレスポンシブ画像(srcset/sizes)に対応している場合、1つの目標サイズを決めるのではなく、ブレークポイントごとに目標を決めることになります。小さいブレークポイント用の画像は、単に大きな画像を圧縮しただけのものではなく、実際にその表示幅に合わせてリサイズされている必要があります。スマホの訪問者が、圧縮率が高いだけでピクセル数は同じ大きな画像をダウンロードするのではなく、実際にピクセル数の少ない小さいファイルをダウンロードできて、初めてこの恩恵を十分に得られます。

よくある質問

ヒーロー画像・メインビジュアルはどれくらいのサイズにすべきですか?
横幅1920pxが実用上の安全な上限で、ほとんどのデスクトップのビューポート幅をアップスケールなしでカバーできます。高さはデザイン次第ですが、フルバナーであれば600〜1000px程度が一般的です。1920pxを超える幅で配信すると、ほとんどの訪問者の実際のビューポート幅を超えたピクセル情報を無駄に転送することになります。ブラウザ側で表示に合わせて縮小表示されるだけで、見た目の恩恵はありません。
Retina(高DPI)ディスプレイ向けに2倍・3倍の画像を用意する必要はありますか?
近距離で見られ、シャープさが重要な要素(ロゴ、アイコン、文字を重ねたヒーロー画像)には、2倍解像度の画像(表示幅1200pxの枠に対して2400px幅の画像)を用意すると、高DPIディスプレイでの見え方がはっきり改善します。一方、通常のスクロール距離で見る一般的な写真コンテンツでは、1倍と2倍の違いに気づく人はかなり少なく、すべてに2倍・3倍を一律で用意すると画像の総容量が単純に2〜3倍に膨らみます。シャープさが重要な小さな要素に絞って高DPI版を用意するのが現実的です。
ECサイトの商品一覧画像は何pxが適切ですか?
一覧・グリッド表示のサムネイルは幅300〜500px、50KB以下が目安です。表示サイズが小さく、閲覧時間も短いため、強めの圧縮による見た目への影響がほとんど気になりません。商品詳細ページのメイン画像は幅800〜1200px、150KB以下が目安です。顧客が拡大表示やじっくり確認する可能性があるためです。拡大表示(ズーム)機能がある場合、そのための高解像度画像は別ファイルとして必要なときだけ読み込むようにし、全員に最初から配信しないようにしてください。
ページ内のすべての画像に同じファイルサイズ目標を適用すべきですか?
いいえ。ファイルサイズの目標は、その画像がどれだけ注目され、どれだけ大きく表示されるかに比例させるべきで、一律のルールではありません。画面いっぱいのヒーロー画像は、十数枚並んだグリッド内の1枚のサムネイル(50KB以下でよい、一瞥されるだけの画像)よりも多くの余裕(200KB程度まで)を持たせるべきです。
レスポンシブ画像(srcset)を使うとこの数値の考え方はどう変わりますか?
`srcset`を使うと、訪問者の実際のビューポート幅やピクセル密度に応じて異なる画像ファイルを出し分けられるため、スマホの訪問者は同じ画像枠に対して実際に小さいファイルをダウンロードすることになります。全員が同じ大きな画像をダウンロードしてCSSで縮小表示するのとは違います。`srcset`を使う場合、上記の目安サイズは最大のバリエーション(通常デスクトップ向けの1倍画像)に対する目安になり、小さいブレークポイント用の画像は単に圧縮するだけでなく、それぞれの表示幅に合わせて実際にリサイズしておく必要があります。