Optimization7 min readJune 18, 2026
2026年版：ウェブサイトに最適な画像サイズと形式
最適化されていない画像は、サイトが遅くなる最大の原因です。このガイドでは、現代的なサイトで画像が実際にどう表示されるかに基づいた、画像サイズ・ファイルサイズ・形式に関する具体的な推奨事項を紹介します。
黄金律：表示サイズで画像を配信する
800pxでしか表示されないのに、幅4000pxの画像をアップロードしないでください。ブラウザは画像全体をダウンロードしますが、実際に表示されるのはその一部のサイズだけです — その余分なデータはすべて無駄な帯域幅になります。
アップロード前に、必ず表示される最大サイズに画像をリサイズしましょう。
用途別の推奨サイズ
| 画像タイプ | 最大幅 | 目標ファイルサイズ |
|---|---|---|
| フルワイドのヒーロー／バナー | 1920px | 200KB未満 |
| ブログ記事のアイキャッチ画像 | 1200px | 100KB未満 |
| ブログ記事内の画像 | 800px | 60KB未満 |
| 商品写真（EC） | 1000px | 80KB未満 |
| サムネイル／カード画像 | 400px | 25KB未満 |
| ロゴ（ラスター） | 200px | 10KB未満 |
| 背景テクスチャ | 1000px（タイル） | 30KB未満 |
最適な形式の推奨
- 写真・商品画像：WebP（第一選択）または品質80%のJPG
- ロゴやアイコン：SVG（ベクター） — どんなサイズでも完璧に拡大縮小、ファイルサイズも極小
- スクリーンショットやUI画像：PNGまたは可逆WebP
- 単色イラスト：SVGまたはWebP
Core Web Vitalsの目標値
GoogleはCore Web Vitalsに基づいてページを評価します。画像に関連する指標はLargest Contentful Paint（LCP） — メインの可視画像がどれだけ速く読み込まれるかを示します。
- 良好：LCPが2.5秒未満
- 改善が必要：2.5〜4秒
- 不良：4秒超
ヒーロー画像が200KBを超えている場合、モバイル回線でのLCPスコア低下の原因になっている可能性があります。
ステップバイステップ：画像最適化のワークフロー
- 表示サイズを確認する — 画像が実際にレンダリングされるCSS/HTML上の最大幅を確認します。
- その幅にリサイズする — 画像リサイズツールを使用します。必要に応じてRetinaディスプレイ用の2倍バージョンも用意しましょう。
- WebPに変換する — JPGからWebPまたはPNGからWebPを使用します。
- 圧縮する — 品質75〜80%で画像圧縮ツールを使用します。
- widthとheight属性を設定する — Core Web Vitalsのもう一つの指標であるCumulative Layout Shift（CLS）を防止します。
- 遅延読み込みを追加する — ファーストビュー外の画像には
loading="lazy"を使用します。
Retina／HiDPIスクリーン
Retinaディスプレイ（多くの最新スマートフォンやMacBook）は2倍または3倍のピクセル密度で表示します。ページ上の幅400pxの領域には、Retinaで鮮明に見せるために800pxの画像が必要です。画面密度に応じて異なるサイズを配信するには、HTMLのsrcset属性を使用してください。
<img
src="image-400.webp"
srcset="image-400.webp 1x, image-800.webp 2x"
width="400" height="300"
alt="説明文"
>Next.jsユーザー向け
Next.jsを使用している場合、組み込みの<Image>コンポーネントがこれらすべてを自動的に処理します — リサイズ、WebP配信、遅延読み込みがすべて標準で行われます。元の高解像度画像を用意するだけで、配信の最適化はNext.jsに任せられます。