Web用画像ファイルサイズ＆フォーマット完全ガイド

ウェブサイトのすべての画像にはファイルサイズの「予算」があります。予算を超えるとページの表示が遅くなり、守ればすべてが快適に感じられます。このガイドでは主要な用途ごとの具体的なKB目標値、対応するピクセル寸法、そしてその目標を達成するための最適なフォーマットを紹介します。

用途別 推奨ファイルサイズ

以下の目標値はWebPまたはAVIFを使用することを前提としています。JPEGに限定される場合は各数値に約25〜30%を加算してください。

フォーマットが最大の差を生む

同じ写真が同じ視覚品質でも、フォーマットによってファイルサイズは大きく異なります。

JPEGからWebPに切り替えると約25〜35%の削減、AVIFに移行するとJPEGと比較して約50%の削減になります。詳細な比較はWebP vs AVIFガイドをご覧ください。

今すぐ変換できます：JPGをWebPに、AVIFに変換、複数ファイルなら一括変換をご利用ください。

ピクセルサイズ：隠れた倍増効果

ファイルサイズはピクセル数と圧縮の2つに依存しますが、ほとんどの人は圧縮に集中してピクセル数を無視しがちです。しかし、寸法を削減する方がファイルサイズへの影響ははるかに大きいです。

簡単な例を挙げます。4000×3000ピクセルの写真は1200万ピクセルです。これを1200×900にリサイズすると108万ピクセルになり、生データが91%削減されます。圧縮の前から、ほとんどの重みを排除できています。

目安として、表示コンテナより広い画像は配信しないでください。ブログのコンテンツエリアが720px幅なら、Retinaに対応した1440pxが配信すべき最大サイズです。それを超えるものは帯域幅の無駄です。

Vizuaのリサイズツールで必要な寸法に正確に縮小してから、JPEG圧縮やPNG圧縮で最終的な削減を行えます。

品質設定によるサイズ制御

適切なサイズに揃えて適切なフォーマットを選んだら、圧縮品質が最後の調整項目です。3つのアクションがどのように組み合わさるかの実践例です。

出発点：カメラの写真、4000×3000、PNGで保存——約14 MB。

1. リサイズして1200×900（ブログコンテンツ幅、Retina 2x対応）：PNGで約3.5 MB
2. WebPに変換、品質80：約130 KB
3. AVIFに変換、品質65（スタックが対応する場合）：約90 KB

元のPNGから99.3%の削減です。通常の表示サイズでは視覚的にオリジナルと区別がつきません。フォーマット別の詳細な品質推奨については画質を落とさずに圧縮する方法もご参考ください。

ページあたりの総画像予算

実用的なフレームとして、ページあたりの総画像重量を500 KB以下に目指しましょう。典型的な内訳は次のとおりです。

• ヒーロー画像1枚：約150 KB
• コンテンツ画像3〜4枚：各約100 KB、合計300〜400 KB
• サムネイル、アバター、アイコン：合計約50 KB

この予算内なら4G環境でも快適に読み込め、モバイルのデータ通信量を無駄に消費しません。画像が多い場合（ギャラリー、ECグリッドなど）は、lazy loadingを使うことで最初の読み込みを予算内に収められます。ファーストビューの画像のみが最初のロードパフォーマンスに影響します。

ページ重量の詳細なデータはHTTP Archiveのページ重量レポートでも確認できます。また、最適化の全体プロセスについてはWeb画像最適化ガイドもあわせてご覧ください。

よくある質問