Web用画像の最適なサイズと品質(用途別の目安)

「画像はどのくらいの大きさにすべき?」はWebデザインで最も多い質問のひとつで、答えは常に「どこに表示するかによる」です。このガイドは用途別に寸法・容量・品質の実践的な出発点を示し、勘に頼らずに決められるようにします。間違ったサイズはページを遅くするか画質を落とすので、目安を知っておけば両方避けられます。

重要な2つの数字

Web画像には2つのサイズがあります。ピクセル寸法(例:1600×900)と、キロバイト単位のファイル容量です。寸法は画面上で画像が占めるスペースにほぼ合わせ、容量はきれいに見える範囲でできるだけ小さく。両方を最適化するのがゴールです。

用途別の目安

全幅のヒーロー画像

大画面向けに幅1600〜2000px程度を目安にし、WebPかAVIFでおおよそ200KB以下に収めます。ヒーローはたいていLCP要素なので、その容量が体感速度に大きく響きます。

ブログ・本文の写真

記事カラムの多くは幅700〜900pxなので、1200〜1600px程度の画像でRetina画面までカバーできます。150KBを大きく下回るのが目標。WebPの品質75でほぼ十分です。

サムネイル・カード

サムネイルは画面上で小さいので400〜600pxで十分。30〜50KB以下に抑えられることが多く、1ページに何十枚も並ぶ場面では大きな差になります。

品質の出発点

非可逆形式なら、写真は品質70〜80が安全圏です。AVIFは同じ見た目をもう少し低い値で出せます。必ず前後を比較して、違いが分からない最も低い値を選びましょう。

実践に落とし込む

用途ごとに目標幅を決め、そこへリサイズして、WebPかAVIFの品質75で変換します。Scrunchなら画像一式をまとめて一括変換し、ダウンロード前に各結果を元と比較できます。すべての画像を必要なだけ軽く保てます。

よくある質問

表示サイズより大きい画像をアップしてもいい?

Retina画面用に表示サイズの約2倍までは有用です。それを超えると帯域を浪費してページを遅くするだけなので、2倍を上限と考えてください。

容量は小さければ小さいほど良い?

下げすぎると画質が目に見えて悪化します。目標は、きれいに見える範囲で最小にすること。前後を比較してバランス点を見つけましょう。

すべての画像に同じ品質を使うべき?

品質75は堅実な既定値ですが、大きなヒーロー画像は慎重に、小さなサムネイルはより攻めた値でも構いません。用途ごとに調整するのが最良です。

画像のファイル名もSEOに影響しますか?

はい。内容を表すファイル名とaltテキストは画像検索とアクセシビリティに役立ちます。img12345.jpgよりred-running-shoes.webpのような説明的な名前を。サイズ・容量の最適化と合わせれば画像SEOの効果が高まります。