その画像、重すぎませんか？Webサイトを爆速化する「画像最適化」の教科書
「サイトが遅い！」その原因の6割は画像です。次世代フォーマット（WebP/AVIF）の活用法から、レスポンシブ対応、SEOに強い遅延読み込みの設定まで、エンジニアが実践する最適化テクニックを解説。
サイトの重さは「画像の重さ」
Webサイトの表示速度は、ユーザー体験（UX）とSEOの両方に直結する超重要項目です。Googleの調査によると、表示に3秒以上かかると53%のモバイルユーザーが離脱すると言われています。
では、なぜサイトは重くなるのでしょうか？HTTP Archiveのデータによると、Webページ全体のデータ容量の**約50〜60%**を画像が占めています。つまり、JavaScriptやCSSを必死に削るよりも、画像を適切に最適化するほうが圧倒的に効率よく高速化できるのです。
画像圧縮画質を落とさずファイルサイズを圧縮。Webサイト高速化や容量節約に最適です。1. フォーマットの選び方（「とりあえずJPEG」は卒業）
画像の内容によって、最適なファイル形式は異なります。
| フォーマット | 特徴 | 最適な用途 | 圧縮率の目安 |
|---|---|---|---|
| JPEG (JPG) | 写真に強い。透過不可 | 写真、グラデーション背景 | 標準 (100%とする) |
| PNG | 透過対応。写真は重くなる | ロゴ、アイコン、スクリーンショット | 大 (JPEGの2〜10倍以上) |
| WebP | Google開発。透過・アニメもOK | 基本はコレ（推奨） | 低 (JPEG比 ▲30%) |
| AVIF | 最新規格。WebPよりさらに高圧縮 | 究極の軽量化を目指す場合 | 極小 (WebP比 ▲20〜50%) |
| SVG | ベクターデータ。無限に拡大可能 | アイコン、シンプルなロゴ | 用途により最小 |
結論: 写真もイラストも、基本は WebP に変換して使いましょう。Chrome、Safari、Edge、Firefoxなどの主要ブラウザすべてでサポートされています。
2. 適切なサイズへのリサイズ
やってしまいがちなミスNo.1が「デジカメやスマホで撮った写真をそのままアップロードすること」です。最近のスマホ写真は4,000px以上ありますが、Webサイトでの表示領域はせいぜいスマホで400px、PCでも1,000px程度です。
- 幅1,200pxあれば十分: ブログのアイキャッチや商品画像なら幅800〜1,200pxで十分です
- 2倍サイズを用意: Retinaディスプレイ（高解像度画面）対応のため、表示サイズの「2倍」の画像を用意するのが定石
実例: 筆者が運営するサイトで、アイキャッチ画像を4,000px/3MBから1,200px/150KB（WebP）に変換したところ、LCP（最大コンテンツの描画）が4.2秒から1.8秒に短縮し、Googleの評価が「要改善」から「良好」に変わりました。
3. レスポンシブ画像配信（srcset）
スマホユーザーにPC用の巨大な画像を読み込ませるのは、データの無駄使いです。HTMLの srcset 属性を使えば、画面サイズに合わせてブラウザが自動的に最適な画像をダウンロードします。
<img src="image-800.webp" srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w" sizes="(max-width: 600px) 100vw, 800px" alt="レスポンシブ画像の例">スマホでは400wの軽い画像、PCでは800wの画像が選ばれます。Next.jsを使っている場合は、<Image /> コンポーネントがこの処理を自動化してくれます。
4. 遅延読み込み（Lazy Loading）
ページを開いた瞬間、まだ見えていないフッターの画像まで読み込む必要はありません。loading="lazy" をつけるだけで、画像の読み込みを「画面内に近づくまで」待機させられます。
<img src="heavy-image.webp" loading="lazy" width="800" height="600" alt="...">注意: ファーストビュー（ページを開いて最初に見える範囲）の主要画像には loading="lazy" をつけないでください。ブラウザが読み込み開始を遅らせてしまい、コアウェブバイタルの重要な指標である LCP（Largest Contentful Paint） が大幅に悪化する原因になります。ファーストビューの画像には loading="eager"（または省略）が適切です。
5. CLS（レイアウトシフト）を防ぐ
画像読み込み後に「ガクッ」とレイアウトがずれる現象（CLS）は、Googleのコアウェブバイタル（CWV）でマイナス評価になります。これを防ぐには、必ず width と height 属性を指定しましょう。
<!-- 良い例 --><img src="photo.webp" width="800" height="600" alt="サンプル画像">ブラウザは width と height の値から事前にアスペクト比を計算し、画像がダウンロードされる前にあらかじめ正しいスペースを確保します。これにより、画像が表示された瞬間に周囲のコンテンツが押し出される「ガクッ」という動きを防ぐことができます。
【Before/After】画像最適化で表示速度が2倍以上になった事例
あるECサイトの商品ページ（画像20枚）で最適化を実施した結果：
| 指標 | Before | After | 改善率 |
|---|---|---|---|
| ページ全体のサイズ | 8.2 MB | 1.4 MB | ▲83% |
| LCP（最大描画） | 5.8秒 | 2.1秒 | ▲64% |
| 直帰率 | 71% | 52% | ▲19pt |
| コンバージョン率 | 1.2% | 2.1% | +0.9pt |
画像をWebPに変換し、適切なサイズにリサイズし、Lazy Loadingを設定。それだけでサイトの直帰率とコンバージョン率が大幅に改善しました。
おすすめ最適化ツール
1. Jeneeの画像圧縮ツール
画像圧縮画質を落とさずファイルサイズを圧縮。Webサイト高速化や容量節約に最適です。ブラウザ上でカンタンに圧縮・リサイズができます。プライバシー重視で、サーバーにアップロードせずローカル処理します。
2. Squoosh（Google）
こだわりたい人向け。WebPやAVIFへの変換、圧縮前後の比較スライダーが充実。1枚ずつ丁寧に最適化したいときに。
3. TinyPNG
定番サービス。PNGとJPEGを「見た目を変えずに」最大70%圧縮してくれます。月50枚まで無料。
よくある質問（FAQ）
Q1. WebPに変換すると画質が落ちますか？
WebPは「非可逆圧縮」と「可逆圧縮」の両方に対応しています。品質値（Quality）を80〜85程度に設定すれば、人間の目ではJPEGとほぼ区別できないクオリティを保ちながら、ファイルサイズを30〜40%削減できます。Jeneeの画像圧縮ツールでも品質を調整できます。
Q2. 常にAVIFにしたほうがいいですか？
AVIFはWebPよりさらに高圧縮ですが、2026年時点でもまだ一部のブラウザやクローラーが完全対応していません。現時点では「メインはWebP、フォールバックにJPEGまたはPNG」という構成が最も安全で実用的です。
Q3. SVGファイルも圧縮できますか？
SVGはベクターデータなので、画像圧縮ツールよりもSVGO（SVGオプティマイザー）を使うのが適切です。SVGの不要なメタデータやコメントを削除するだけで、ファイルサイズが20〜70%も小さくなることがあります。
Q4. 画像をCDN経由で配信するメリットは？
Cloudflare ImagesやCloudinaryなどのCDN（コンテンツデリバリーネットワーク）を使うと、ユーザーの地理的に近いサーバーから画像を配信するため遅延が減ります。さらに、ブラウザが対応しているフォーマット（AVIFやWebP）を自動で選んで配信してくれるため、手動での変換が不要になります。
まとめ：画像のダイエットは効果絶大
サーバーの応答速度を0.1秒縮めるのは技術がいりますが、画像のファイルサイズを半分にするのはツールを通すだけで一瞬です。
- WebP を使う
- 適切なサイズ にリサイズする（幅1,200px以下を基本に）
loading="lazy"をファーストビュー以外の画像につけるwidthとheightを指定してCLSを防ぐ
これだけで、あなたのサイトは劇的に軽くなり、ユーザーにも検索エンジンにも好かれるサイトになります。まずはトップページの重たい画像をチェックすることから始めてみませんか？
画像圧縮画質を落とさずファイルサイズを圧縮。Webサイト高速化や容量節約に最適です。
