はじめに
本記事の目的
Webサイトで使う画像は、見栄えだけでなく表示速度や使い勝手にも大きく影響します。本記事では、ピクセル数（横×縦）、ファイル容量、アスペクト比（縦横比）、解像度（dpi）、ファイル形式（JPEG/PNG/WebPなど）という観点から、用途別の「最適な画像サイズ」を分かりやすく整理します。
誰に向けた記事か
- サイト制作や更新を担当する方
- ブログやショップ運営者
- デザイナーやコーダーの入門者
専門用語は必要最小限にし、具体例を交えて説明します。
本記事で扱う内容（全7章の構成）
- はじめに（本章）
- 最適化前に押さえるべき3要素
- Webでよく使われる基準サイズと解像度
- ホームページ全体での推奨値
- 用途別の推奨サイズ・容量・比率一覧
- ブログにおける推奨サイズと比率
- ファイルサイズ（容量）の目安
読み方のポイント
まず目的の用途（例：トップのヒーロー画像、記事内サムネイル、背景）を決めると、どの章を参照すべきか分かりやすくなります。各章で具体的な数値と理由を示しますので、実作業にすぐ活用できます。
Webで「最適な画像サイズ」を考える前に押さえるべき3要素
まず押さえる3つ
Webの画像最適化で見るべき基本は、1) ピクセル数（縦横サイズ）、2) ファイルサイズ（容量：KB／MB）、3) アスペクト比（縦横比）の3点です。用途に合わせて優先順位をつけると作業が楽になります。
1) ピクセル数（縦横サイズ）
表示領域に合わせて決めます。たとえば画面幅いっぱいのメイン画像は横幅1920px前後、カード・サムネは横400〜800px程度が目安です。表示サイズが小さい場所に大きな画像を使うと読み込みが遅くなります。高密度ディスプレイ向けには表示ピクセルの2倍で用意します（例：表示300×200なら600×400を用意）。
2) ファイルサイズ（容量）
軽いほど表示が速くなります。品質と容量を見比べ、必要十分な画質を目指します。一般的にはサムネは数十KB、メイン画像は数十〜数百KBを目安に調整します。圧縮ツールで画質を確認しながら容量を削減してください。
3) アスペクト比（縦横比）
見た目の一貫性を保つため同じ比率で統一します。よく使う比率は16:9（横長）、4:3、1:1（正方形）です。比率が合わない場合はトリミングや余白で調整します。
補足：ファイル形式と解像度
写真はJPEG、透過が必要ならPNG、さらに圧縮効率を求めるならWebP／AVIFを検討します。dpi／ppiは印刷向けの指標で、Webではピクセル数が重要です。
Webサイト全般でよく使われる「基準サイズ」と解像度
概要
Webサイトでよく使われる基準サイズと解像度を、実務で使いやすい形でまとめます。画面幅（ピクセル数）を基準に考えると、画像の準備がシンプルになります。
PC（デスクトップ）の基準
- 基準横幅：950〜1,200pxが多い。コンテンツ幅は960〜1,020pxあたりが定番です。
- デザインカンプ：1,920pxや1,536pxで作成することが主流です。フル幅のヒーロー画像は1920px以上を想定してください。
スマホの代表サイズ
- iPhone系：375×667px
- Android系：360×640px
実際はレスポンシブでビューポートに合わせて画像を切り替えます。
解像度（dpi）と高解像度対応
- Web用の一般的な解像度は72〜96dpiですが、ブラウザはピクセル数で描画するためdpiよりピクセル数が重要です。
- 高密度ディスプレイ（Retinaなど）には、表示ピクセルの1.5〜2倍の画像（@2x）を用意し、srcsetやpictureで配信すると見栄えが良くなります。
実務でのポイント
- デザインカンプは余裕を持って作る。画像は表示サイズに合わせてリサイズ・圧縮する。
- アイコンやロゴは可能ならSVGを使うと拡大縮小に強いです。
ホームページ全体での「画像サイズ」推奨値
基本の推奨値
- 基本はフルHDサイズの1920×1080pxを基準にします。トップのヒーロー画像やフル幅の背景画像はこのサイズで用意すると、多くのPC画面で綺麗に表示できます。
ページ内の目安（実務向け）
- ヒーロー・背景：1920×1080px（フル幅）
- メインコンテンツ画像：1200×675px程度（横幅を1200pxに揃えると整います）
- サムネイル／一覧画像：400×225px〜600×338px
- アイコンや小さな装飾：100×100px前後
デバイス別の考え方
スマホ表示では横幅が狭くなるため、実際には表示領域に合わせて画像を切り替えます。レスポンシブ対応で、PC用は1920px、タブレット用は800〜1200px、スマホ用は360〜480pxを目安に複数サイズを用意してください。
画質と容量のバランス
大きな画像は見た目が良くなりますが、読み込みが遅くなります。一般的にはフル幅画像も圧縮して容量を1MB以下に抑えることを目指します。詳細は別章で触れます。
実務のワークフロー例
- 元画像は大きめ（3000px前後）で保存
- 出力は用途ごとに切り出し（1920/1200/800/480など）
- 形式を選び（WebP推奨、互換性でJPEG/PNG）し、圧縮してアップロード
ただし、特殊なデザインや高精細な写真を多用する場合は個別調整してください。
用途別：Web画像の「推奨サイズ・容量・比率」一覧
背景画像（Background）
- 推奨サイズ（PC）：2,560×1,400px（比率16:9）
- 推奨サイズ（スマホ）：360×640px（比率16:9）
- 目標容量：PCで200〜400KB、スマホは100〜200KB
- 備考：大きな画面向けに余裕を持たせます。透過が不要ならJPEG/WebPが軽量です。
ヒーロー画像（Hero）
- 推奨サイズ（PC）：1,280〜2,500×720〜900px（比率16:9）
- 推奨サイズ（スマホ）：360×200px（比率16:9）
- 目標容量：150〜350KB（表示領域が大きいのでやや余裕）
- 備考：重要な被写体はセンターに配置し、切り替え時の見切れを防ぎます。
コンテンツ内メイン画像
- 推奨サイズ（PC）：1,200×800px（比率3:2）
- 推奨サイズ（スマホ）：360×240px（比率3:2）
- 目標容量：80〜200KB
- 備考：テキストと組み合わせる場合は視認性を優先してください。
サムネイル／一覧画像
- 推奨サイズ：400×300px（比率4:3）や360×240px（3:2）
- 目標容量：20〜80KB
- 備考：一覧は複数並ぶため軽めに調整します。
ロゴ画像
- 横長ロゴ：推奨幅200〜400px（高さは比率に合わせる）／容量10〜50KB
- 正方形ロゴ：200×200px前後／容量10〜50KB
- 備考：透過が必要ならPNG/WebP、単色ならSVGを推奨します。
SNS共有画像（OGP）
- 推奨サイズ：1,200×630px（比率約1.91:1）
- 目標容量：100〜200KB
- 備考：サムネイル切り抜きに注意し、中心に重要情報を配置します。
ファビコン
- 推奨サイズ：32×32px、16×16px
- 目標容量：1〜5KB
- 備考：単純な形状・色で小さくても判別できるデザインにします。
ブログにおける「推奨画像サイズ」と比率
概要
ブログ本文で使う画像は、読みやすさと表示速度の両方を考えて選びます。横幅はおおむね1,000px前後を目安にするとバランスが良いです。高さは用途に応じて520〜750px程度が適切です。
推奨サイズ（目安）
- 横幅：1,000px前後（フル幅表示や記事欄の最大幅に合わせる）
- 高さ：520〜750px（16:9なら560px前後、4:3なら750pxに近くなります）
よく使われる比率と使いどころ
- 16:9（使いやすく視覚的に安定）：ヘッダーや本文内の見出し画像に最適。例：1000×562px
- 4:3（やや縦が欲しいとき）：人物や商品撮影のトリミングに向く。例：1000×750px
- 3:2（写真の標準）：写真を自然に見せたいときに使う。例：1000×667px
- 1.91:1（SNSのリンクカードに近い）：スペースを取りすぎずバランス良く見せる。例：1000×524px
図解・縦長画像の扱い
図解やフローチャートは情報を優先して高さを調整してください。全幅表示の場合は幅を保ちつつ、必要なら複数の画像に分割して読みやすくします。
実務のポイント
- レスポンシブ対応で、表示幅に合わせて横幅を自動縮小する設定を使います。
- 高解像度（Retina対応）を意識するなら、表示サイズの2倍の画像を用意するときがありますが、容量増に注意してください。
推奨の簡単まとめ（数字のみ）
横幅：1000px前後 / 高さ：520〜750px / 比率：16:9・4:3・3:2・1.91:1
画像の「ファイルサイズ（容量）」の推奨値
はじめに
ホームページやブログでは、画像の容量を抑えることが表示速度とユーザー体験に直結します。ここでは実務で使いやすい目安と具体的な対策をまとめます。
個別画像の目安
- 一般的なコンテンツ画像（記事内やサムネイル）：1枚あたり200KB以下を目安にします。
- サムネイルや小さなアイコン：できれば50KB以下にします。
ページ全体の目安
- 1ページあたりの合計容量は1.6MB以内を目標にします。この目安だと、1枚200KBの画像なら5枚程度が適切です。
例外と注意点
- 背景画像やヒーロー（大きなビジュアル）は例外的に容量が大きくなりますが、表示速度への影響が大きいためできるだけ軽量化します。
軽量化の具体策
- 適切なフォーマット（写真はJPEG/WEBP、図や透過はPNGやSVG）を選びます。
- 解像度を表示サイズに合わせて縮小します。
- 画像圧縮ツールで品質を落とし過ぎず圧縮します。
- 遅延読み込み（Lazy Load）を使い、表示領域外の画像は後で読み込みます。
- レスポンシブ画像（srcset）で端末に合った画像を返します。
実践チェックリスト
- 主要ページの合計容量を確認する
- 各画像が必要な表示サイズに合わせられているか確認する
- 圧縮と遅延読み込みを導入する
これらを順に実行すれば、表示速度を保ちながら美しい見た目を維持できます。
