初心者でもわかるwebサイト画像サイズの目安完全ガイド

はじめに

この文書の目的

Webサイトに表示する画像の「サイズ」や「ファイル容量」、「画像形式」、「解像度」について、実務で使える目安をわかりやすくまとめました。画像選びや最適化を適切に行うことで、表示速度や検索順位、ユーザー体験が改善します。

なぜ画像を最適化するのか

画像が大きすぎるとページの表示が遅くなり、訪問者が離脱しやすくなります。特にスマートフォンでは通信量が限られるため、軽い画像は重要です。加えて、検索エンジンは表示速度を評価に使うため、最適化はSEOにも寄与します。

本書で学べること

• Web向けに適した画像のピクセル（サイズ）とファイル容量の目安
• 用途やデバイスごとの推奨サイズ例（アイキャッチ、サムネイル、商品画像など）
• 画像形式の選び方と解像度の考え方
• 最適化による具体的なメリットと実践ポイント

読み方のヒント

章ごとに具体例や数値目安を示します。実際の制作やCMS管理でそのまま使える情報を優先しています。次章から順に確認すると、無理なく最適化を進められるはずです。

Webサイト画像サイズの目安とは

まずは用途で分ける

Webサイトで使う画像は、表示場所によって適切なサイズが変わります。目的に合わせて最初に分類すると選びやすくなります。

代表的なサイズ例

• メインビジュアル（ヒーロー）: 1920×1080px — PCの横幅を想定した大きめサイズ
• 背景画像: PCは2560×1400px、スマホは360×640px — 見切れや余白を考慮
• サムネイル／アイキャッチ: 幅360〜720px×高さ240〜480px — 記事一覧やカード表示向け
• 製品画像・ギャラリー: 900〜1440×600〜960px — 拡大しても見やすいサイズ

サイズを決めるときのポイント

• 表示領域の幅を基準に横幅を決める（例: PCなら1200〜1920pxを想定）
• アスペクト比を統一するとレイアウトが崩れにくいです
• 高解像度（Retina）対応は重要です。主要な画像は2倍サイズも用意すると見栄えが良くなります

実務的な注意点

• 小さすぎると粗くなり、大きすぎると読み込みが遅くなります。目的と表示環境を意識して、必要十分なサイズを選んでください。
• 実機やブラウザの開発者ツールで表示を確認すると確実です。

画像ファイルサイズの目安

概要

Webサイト用の画像は、1枚あたり200KB以下を目安にすると快適に表示できます。ページ内の画像合計は1.6MB以下に抑えると読み込みが速く、訪問者の離脱を防げます。

具体的な目安（目安の範囲）

• サムネイルや小さいアイコン：5〜30KB
• 記事中の挿入画像：30〜100KB
• ファーストビュー（横幅いっぱいの画像）：100〜200KB
  これらを合計して1ページあたり1.6MB以内に収めることを意識してください。

なぜ重要か

大きなファイルは読み込みを遅くします。表示が遅いとユーザーは離れてしまい、検索評価にも影響する可能性があります。読み込み改善はユーザー体験とSEOの両方に好影響を与えます。

測り方と簡単な対策

• ブラウザのネットワークタブやページ速度ツールで各画像の容量を確認します。
• 表示サイズに合わせて画像をリサイズします。
• 過度に圧縮しないよう品質を確認しつつ、圧縮ツールで容量を下げます。
• 遅延読み込み（below-the-fold）を使うと初期表示が速くなります。

注意点

目安はあくまでガイドです。画像の用途やサイトの目的に応じて、画質とのバランスを優先して調整してください。

画像形式の選び方

主な形式と特徴

• JPEG：写真向き。圧縮率が高くファイルサイズを小さくできます。風景や人物の写真に適しています。
• PNG：イラストやロゴ向き。透過（背景を抜く）が必要なときに使います。細い線や文字が多い図にも強いです。
• WebP：写真・イラストどちらにも使えます。JPEGより小さくでき、透過やアニメも可能です。対応ブラウザが多く、推奨されます。
• AVIF：さらに高圧縮で画質を保てます。ファイルサイズを最も抑えたい場合に有効です。対応は増えていますが、互換性確認が必要です。
• SVG（補足）：ロゴやアイコンはベクター形式のSVGが最適です。拡大しても劣化しません。

使い分けの実例

• 商品写真や背景写真：WebP／AVIFを優先、未対応環境はJPEGでフォールバック。
• ロゴやアイコン：SVGが第一候補。透過が必要でラスタ形式ならPNG、WebPも可。
• 小さなアニメーション：WebPやAVIFのアニメ機能を検討します。

実装のポイント

• ブラウザ互換を考え、やsrcsetで複数形式を用意してください。軽さと表示品質のバランスを確認し、必要なら圧縮率を調整します。

画像解像度の目安

概要

Webサイトでは72〜96dpi（ppi）が一般的な目安です。これは画面表示に最適化された値で、印刷向けの300dpi以上とは用途が違います。Web用画像をわざわざ高dpiにしても、表示品質はほとんど変わりません。

dpi（ppi）とは簡単に

dpiやppiは「1インチあたりの点（ピクセル）数」を示す指標です。印刷では重要ですが、ブラウザは画像の埋め込みピクセル数（幅×高さ）を基に表示します。たとえば800×600pxの画像は、ファイルに72dpiと書かれていても600px分の高さで表示されます。

なぜ72〜96dpiで十分か

画面は物理的なサイズよりピクセル数で描画します。古くからの慣例で72dpiや96dpiが使われますが、実際にはピクセル幅を適切に決めることが大切です。高dpiにするだけではファイル容量が増える一方で、見た目は変わりません。

高解像度ディスプレイ（Retina等）への対応

高DPI画面では見た目を滑らかにするため、表示サイズの2倍（@2x）などの大きなピクセル画像を用意します。方法としては、srcsetやpictureで複数解像度を用意するのが実用的です。DPIを書き換えるだけでは改善しない点に注意してください。

実務的な注意点

• 画像の重要はdpiでなくピクセル数とファイル容量です。表示サイズに合わせてピクセル幅を決めます。
• ロゴやアイコンは可能ならSVGを使うと拡大縮小に強く、ファイルも軽くできます。
• 高DPI対応は2倍のピクセル幅で用意し、圧縮で容量を抑えます。

推奨の目安（目安として）

• サムネイル：幅150〜300px
• コンテンツ内画像：幅600〜1200px
• ヒーロー画像：幅1200〜2000px（高DPI用は2倍）

以上を基準に、dpiよりピクセル数とファイルサイズを優先して調整してください。

用途別・デバイス別の推奨画像サイズ

ここでは用途とデバイスごとの推奨画像サイズと目安のファイルサイズをわかりやすくまとめます。実際の表示に合わせて複数サイズを用意し、必要に応じて圧縮してください。

背景画像

• PC（フルスクリーン想定）: 2560 × 1400px、ファイルサイズ目安: 最大20MB（大判ディスプレイ向け）
• スマホ: 360 × 640px、ファイルサイズ目安: 軽量化を優先

ヒーロー画像（ファーストビュー）

• PC: 幅1280〜2500px × 高さ720〜900px、ファイルサイズ目安: 最大10MB
• スマホ: 360 × 200px（横長の比率に注意）、表示領域に合わせてトリミング

メインビジュアル（見せたい大きな画像）

• 標準: 1920 × 1080px、ファイルサイズ目安: 200KB以下を目標

サムネイル／カード画像

• 推奨サイズ: 幅360〜720px × 高さ240〜480px、ファイルサイズ目安: 200KB以下

製品・ギャラリー画像

• 決済や拡大表示を想定: 幅900〜1440px × 高さ600〜960px、ファイルサイズ目安: 200KB以下

大きい画像（背景や高解像度ダウンロード用）以外は200KB以下に抑えると表示速度が改善します。複数の解像度を用意して、デバイスごとに最適な画像を配信してください。

画像サイズ最適化のメリット

画像サイズを適切に最適化すると、サイト全体のパフォーマンスと利用者の満足度が大きく改善します。ここでは主なメリットを分かりやすく解説します。

ページ表示速度の向上

画像の容量や不要に大きな解像度を減らすと、ページの読み込みが速くなります。たとえばスマホ回線では数百KBの差でも体感速度が変わり、表示までの待ち時間が短くなります。表示速度が速いと閲覧がスムーズになります。

ユーザー体験（UX）の改善

読み込みが速いとスクロールや操作が止まりにくくなり、サイトの使いやすさが向上します。適切なサイズできれいに見える画像を使えば、印象もよくなります（例：商品画像は必要な解像度に合わせて最適化する）。

SEO評価の向上

検索エンジンはページ速度を評価項目の一つにしています。画像を最適化すると読み込みが速くなり、検索結果での評価向上につながる可能性が高まります。また、クローラーの負担も減らせます。

離脱率とコンバージョンの改善

画像が重いと表示待ちで離脱が増えます。特にランディングページや商品ページでは、最適化により離脱率が下がり、購入や問い合わせなどの行動につながりやすくなります。

サーバー負荷・通信コストの削減

画像容量を減らすと帯域使用量が減り、サーバー負荷や配信コストを抑えられます。大量トラフィックがあっても安定した配信がしやすくなります。

低速回線やアクセシビリティへの配慮

最適化は通信環境が弱い利用者への配慮にもなります。軽い画像を提供すると、誰でも快適に閲覧できるサイトになります。

画像最適化のポイントまとめ

ここまでのポイントを簡潔に整理します。忙しいときにすぐ使える実践的な項目です。

• 用途に合ったサイズを選ぶ：トップ画像は幅1200px前後、サムネイルは400px前後など、表示領域に合わせて用意します。余分に大きな画像は不要です。

• 1枚あたり200KB以下を目安に圧縮：写真でも圧縮で画質を保ちながら容量を削減します。例：JPEG/ WebPで品質70〜80%程度。

• ファイル形式は用途で選ぶ：WebPやAVIFを推奨します。透過や編集互換が必要ならPNG、幅広い互換性がいる場合はJPEGを併用します。

• 解像度はWeb用なら72〜96dpiで十分：印刷向けほど高くする必要はありません。

• ページ全体で1.6MB以下を目指す：画像が多いページは合計を意識して軽くします。

• 運用上の工夫：レスポンシブ画像（srcset）、遅延読み込み（lazy loading）、CDNとブラウザキャッシュを活用します。

• チェックリスト（手順）：①用途に合わせてサイズ決定→②不要なメタ削除と圧縮→③最適形式で保存→④レスポンシブ/遅延設定→⑤ページ合計を確認。

• 便利なツール例：Squoosh、TinyPNG、ImageOptim、Photoshopの「Web用に保存」。

この流れを定着させれば、表示速度と見た目の両方を保ちながら効率的に画像を管理できます。