この記事の対象: 画像最適化に取り組みたいWeb制作者
読了時間: 約7分
ページ容量の50%以上を占めることも珍しくない画像。画像の最適化は、表示速度改善の中で最もインパクトの大きい施策です。
2026年はAVIF形式の普及が進み、画像最適化の選択肢がさらに広がっています。この記事では、フォーマットの比較から実践的な軽量化テクニックまでを解説します。
なぜ画像最適化が重要か
- LCP改善: 最大コンテンツはほとんどの場合画像。LCPスコアに直結
- 帯域節約: ユーザーのデータ通信量を削減
- UX向上: 画像の読み込み待ちが減り、体験が向上
2026年の画像フォーマット比較
| フォーマット | ファイルサイズ | ブラウザ対応 | 透過 | アニメーション | おすすめ用途 |
|---|---|---|---|---|---|
| JPEG | 基準 | 100% | ✗ | ✗ | 写真全般 |
| PNG | JEPGの2〜5倍 | 100% | ✓ | ✗ | ロゴ、アイコン |
| WebP | JPEGの25〜35%減 | 97%+ | ✓ | ✓ | 写真・イラスト全般 |
| AVIF | JPEGの50%減 | 95%+ | ✓ | ✓ | 写真全般（最推奨） |
2026年の推奨: AVIFを第一選択、WebPをフォールバック、JPEG/PNGを最終フォールバックとする3段構成。
画像最適化の実践テクニック
適切なフォーマットの選択
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="説明テキスト" width="800" height="600">
</picture>
<picture>要素でブラウザが対応する最適なフォーマットを自動選択させます。
リサイズ（表示サイズに合わせる）
表示サイズが400×300pxの画像に、4000×3000pxの元画像を使うのはデータの無駄です。表示サイズの2倍（Retina対応）のサイズにリサイズしましょう。
圧縮（lossy vs lossless）
- Lossy（非可逆圧縮）: 画質をわずかに犠牲にして大幅に軽量化。写真向け
- Lossless（可逆圧縮）: 画質を維持して圧縮。ロゴやアイコン向け
写真はLossy圧縮の品質80〜85%が、見た目とサイズのバランスが最適です。
遅延読み込み（loading=”lazy”）
<img src="image.webp" alt="説明" loading="lazy" width="800" height="600">
ファーストビュー外の画像にloading="lazy"を指定し、スクロールして画面に入ったときに読み込みを開始します。
注意: ファーストビュー内の画像（LCPの対象）にはloading="lazy"を使わず、fetchpriority="high"を使用します。
<img src="hero.webp" alt="メインビジュアル" fetchpriority="high" width="1200" height="600">
srcsetとsizesでレスポンシブ画像
<img
srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
src="image-800.webp"
alt="説明"
width="800" height="600"
loading="lazy">
画面サイズに応じて最適なサイズの画像を配信します。モバイルユーザーに大きな画像を送らなくて済みます。
CDNの活用
Cloudflare、Fastly、CloudinaryなどのCDNを使うと、地理的に近いサーバーから画像を配信でき、読み込み速度が向上します。Cloudinaryは画像の自動最適化機能も提供しています。
画像最適化ツール
| ツール | 特徴 | 費用 |
|---|---|---|
| Squoosh | Google製。ブラウザで使える画像圧縮ツール | 無料 |
| ImageOptim | Mac向けの画像最適化アプリ | 無料 |
| Sharp | Node.jsの高速画像処理ライブラリ | 無料（OSS） |
| Cloudinary | クラウドベースの画像管理・最適化 | 無料枠あり |
Sharpでの一括変換例
npx sharp-cli -i input/*.jpg -o output/ -f webp -q 80
WordPressでの画像最適化
WordPressでは以下のプラグインで画像最適化を自動化できます。
- EWWW Image Optimizer: アップロード時に自動でWebP変換＋圧縮
- ShortPixel: 高品質な圧縮。AVIF対応
詳しくは「WordPressサイトの表示速度を改善する実践テクニック」をご覧ください。
まとめ
画像最適化のポイントをまとめます。
- AVIF > WebP > JPEG/PNGの優先順位で
<picture>要素を使用 - 表示サイズの2倍にリサイズ（Retina対応）
- Lossy圧縮 品質80〜85%が写真のベストバランス
loading="lazy"でファーストビュー外の画像を遅延読み込みsrcset+sizesでレスポンシブ画像を配信
