仕様が固定されていて文書化もされているSNSと違い、サイトはレイアウトも可変で、レスポンシブに変化し、使われ方も大きく異なります。トップページのバナーは画面幅いっぱいに広がります。商品写真は端末によって400pxで表示されることも800pxで表示されることもあります。ブログの画像は本文カラムの中に収まります。
「サイト用の画像」に唯一の正解サイズはありません。ただし用途ごとの推奨範囲はあります。これを知っているかどうかが、速くてきれいに表示されるサイトと、重くて画像がぼやけるサイトの分かれ目になります。
画像サイズがサイトに与える影響
画像が最適化されていないとき、問題は2種類に分かれます。
- ピクセル数が大きすぎる画像：ブラウザは800pxで表示するために4000pxの写真をまるごと読み込みます。転送したデータの8割はその場で捨てられます。見た目は何も良くならないのに、サイトだけ遅くなります。
- 容量が大きすぎる画像：寸法が正しくても、圧縮していない写真は3 MBにもなります。画面上の見え方を変えずに150 KBまで落とせるのにです。
この2つは対処法が違います。前者に必要なのは リサイズ（ピクセル数の調整）で、後者に必要なのは 圧縮（ピクセル数を変えずに容量を減らすこと）です。実際には、この2つを順番に行うのがいちばん良い結果になります。
💡 基本の目安：ウェブ用画像の横幅が1920pxを超える必要は、ほとんどありません。フルHDモニターの横幅がこの値だからです。画面全体を占めない画像（本文カラム、商品グリッド、サムネイル）なら上限はさらに小さくなります。これを超えた分は、通信量を無駄にして表示を遅くしているだけです。
早見表：画像の種類別サイズ
| 画像の種類 | 推奨サイズ | 目安の容量 | 形式 |
|---|---|---|---|
| バナー・ヒーロー（全幅） | 1920 × 600–900 px | 100–200 KB | WebP / JPG |
| バナー・PC（固定幅レイアウト） | 1200–1440 × 400–600 px | 80–150 KB | WebP / JPG |
| バナー・スマホ | 768 × 400–600 px | 50–100 KB | WebP / JPG |
| 商品写真（ECサイト） | 800–1200 × 800–1200 px | 60–150 KB | WebP / JPG |
| 商品サムネイル | 300–600 × 300–600 px | 20–50 KB | WebP / JPG |
| 記事・ブログの画像 | 1200 × 600–800 px | 60–120 KB | WebP / JPG |
| 記事サムネイル（一覧用） | 400–600 × 250–400 px | 20–50 KB | WebP / JPG |
| ヘッダーのロゴ | 横幅200〜400 px | 5–30 KB | SVG / PNG / WebP |
| UIアイコン | 24–64 px | 1–5 KB | SVG |
| ファビコン | 16, 32, 180, 192, 512 px | 各1〜10 KB | .ico + PNG |
| Open Graph（SNSプレビュー） | 1200 × 630 px | 80–150 KB | JPG / WebP |
| セクションの背景 | 1920 × 高さ可変 | 100–300 KB | WebP / JPG |
| プロフィール写真・アバター（サイト内） | 200–400 × 200–400 px | 20–50 KB | WebP / JPG / PNG |
| お客様の声・導入事例の画像 | 80–150 × 80–150 px | 5–20 KB | WebP / JPG |
サイトの種類別サイズ
コーポレートサイト・ポートフォリオ
コーポレートサイトのコンテンツ幅は、たいてい960px〜1440pxに収まります。バナーやヒーロー画像はレイアウト幅いっぱいに広がるので、横幅1440〜1920pxあれば最近のモニターには十分です。セクション内の画像（社員、オフィス、サービスの写真）は、横幅800pxを超える必要がほとんどありません。
- メインバナー： 1920 × 700〜900px、200 KB以下
- 社員写真： 400〜600 × 400〜600px、60 KB以下
- サービス・セクションの写真： 800〜1200 × 500〜700px、100 KB以下
ブログ・メディアサイト
ブログの本文カラムは、幅760〜800pxを超えることがほとんどありません。アイキャッチ画像は1200pxあれば、どんなレスポンシブレイアウトも無駄なくカバーできます。記事一覧のサムネイルはさらに小さく、たいてい300〜500pxです。
- アイキャッチ画像： 1200 × 630px、100 KB以下
- 本文中の画像：横幅800〜1200px、各80 KB以下
- 一覧のサムネイル： 400 × 250px、30 KB以下
ECサイト・ネットショップ
ECサイトでは、商品写真がもっとも重要な要素です。購入を後押しする主役だからです。ズーム機能がある場合はそれに耐える解像度が必要ですが、容量は抑えなければなりません。一覧ページは多数の画像を同時に読み込むため、そこで速度が落ちるからです。
- 商品のメイン写真（正方形）： 800〜1200 × 800〜1200px、WebPで80〜150 KB
- 商品のサブ写真：メイン写真と同じサイズ
- 商品グリッドのサムネイル： 300〜500 × 300〜500px、20〜50 KB
- カテゴリ・セールのバナー： 1440 × 400〜600px、80〜150 KB
🛍️ ECサイトでは：商品写真の背景は、必ず白かニュートラルな色にしてください。均一な色の面積が広いほど圧縮が効くので容量が下がりますし、仕入れ先が違う商品どうしでも見た目が揃い、カートで見比べるときにも分かりやすくなります。
ランディングページ
ランディングページは、たったひとつの行動を促すためにつくられます。だからこそ速度が決定的です。表示が1秒遅れるごとにコンバージョン率が7〜12%下がるという調査もあります。LPの画像は、思い切って最適化する必要があります。
- ヒーロー・背景：横幅1440〜1920px、150 KB以下。最優先で対応
- 商品・サービスの写真： 600〜800px、80 KB以下
- 特長アイコン：可能なかぎりSVGで
- お客様の声の写真：円形80〜120px、15 KB以下
2倍の法則（RetinaとHiDPIディスプレイ）
Retina（Apple）やHiDPI（他社）のディスプレイは画素密度が2倍で、通常のモニターより1インチあたりのピクセル数が多くなっています。こうした画面で画像をくっきり見せるには、表示スペースの2倍のピクセル数が必要です。
たとえば、Retinaディスプレイで横400pxに表示する画像は、くっきり見せるには横800px必要です。400pxのまま用意すると、iPhoneやMacBookでは少しぼやけて見えます。
現実的な対処は、最大表示幅の2倍の画像を用意したうえで、しっかり圧縮して容量まで2倍にしないことです。WebPできちんと圧縮した800pxの画像は、最適化していない400pxのPNGより軽くなるのがふつうです。
場面ごとの最適な形式
| 場面 | 最適な形式 | 理由 |
|---|---|---|
| 写真（商品、バナー、人物） | WebP（非可逆） | 同等の画質でJPGより25〜35%軽い |
| ヘッダーのロゴ | SVG | ベクター形式。どんなサイズでも劣化せず、ファイルも軽い |
| SVGが使えない場合のロゴ | 透過PNG | 必要な透過を保てる |
| UIアイコン | SVG | 拡大縮小自在。CSSでアニメーションでき、ファイルは極小 |
| 文字入りのスクリーンショット | WebP（可逆）またはPNG | 文字がくっきり出る。JPGは文字のまわりにノイズが出る |
| Open Graph・SNSプレビュー | JPGまたはWebP | プレビューを出す各サービスとの互換性がもっとも高い |
| 透過のある背景 | アルファチャンネル付きWebPまたはPNG | PNG以外で透過を扱える唯一の形式 |
アップロード前の画像の整え方
サイトに載せる画像は、次の流れで用意するのがおすすめです。
- 使う寸法を決める。その画像がレイアウト上で占める最大スペースはどれくらいか。上の早見表を使うか、ブラウザで要素を検証してください（F12 → 画像の入る領域を選択）。
- 表示スペースの2倍にリサイズする。無駄を出しすぎずにRetinaディスプレイに対応できます。サイズ変更ツールで横幅をピクセル単位で指定してください。
- WebPに変換する。サイトやCMSがWebPに対応しているなら（最近のものはほぼ対応しています）、アップロード前に変換しておきます。変換ツールならすぐ終わります。
- 圧縮する。推奨の範囲までファイルサイズを落とします。圧縮ツールなら、JPG・PNG・WebPを見た目の劣化なく最適化できます。
- 結果を確認する。圧縮した画像を開いて元の画像と見比べます。違いが分からなければ成功です。
いまのサイトの画像サイズを調べる
運用中のサイトの画像が最適化されているかは、次のツールで確認できます。
- Google PageSpeed Insights（pagespeed.web.dev）：URLを解析し、削減できる画像とその削減見込み量をKB単位で一覧にしてくれます。
- Chrome DevTools → Network → Img：リクエストを画像で絞り込むと、読み込まれた各ファイルの容量が見えます。容量順に並べれば、重い画像がすぐ分かります。
- WebPageTest.org：ウォーターフォール表示で、どの画像が先に読み込まれ、どれくらい時間がかかっているかを細かく確認できます。
サイトの画像サイズでよくある失敗
- カメラの写真をそのまま上げる：カメラの写真は3〜12 MB、横幅4000〜8000pxあります。リサイズも圧縮もせずにこれを必要とするサイトはありません。
- 写真にPNGを使う：写真をPNGにすると、JPGやWebPの5〜10倍の容量になります。しかも見た目は良くなりません。PNGは透過が必要な画像か、輪郭のはっきりした図版だけに使ってください。
- スマホ向けの画像を用意しない：横幅390pxのスマホに1920pxの画像を送るのは、完全な無駄です。HTMLの
srcset属性を使えば自動で解決します。 - Open Graph画像を忘れる：プレビュー画像を設定していないページがLINEやX、LinkedInで共有されると、ありきたりな画像や空白のサムネイルが出てしまいます。
og:imageのメタタグに、必ず1200×630pxの画像を設定してください。 - ロゴをJPGにする： JPGは白背景が強制的に付くため、色付きや透過の背景に置いたときに白い四角が出てしまいます。ロゴは必ずSVGかPNGにしてください。