1. ホーム
2. web
3. Next.js画像最適化：基本から応用パターンまで

はじめに

画像はWebページの総バイト数の50%以上を占め、最適化はパフォーマンス向上に不可欠です。Next.jsはnext/imageコンポーネントとビルトインの画像最適化APIを通じて、包括的な画像最適化パイプラインを提供します。本記事では、セットアップから高度なパターン、Core Web Vitalsへの影響までを解説します。

next/imageコンポーネント

next/imageコンポーネントはHTMLの<img>要素を拡張し、自動レイジーロード、レスポンシブsrcset生成、CLS防止のための幅と高さの強制、ブラーアッププレースホルダー、自動フォーマット交渉を提供します。

import Image from "next/image";

function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="ヒーローバナー"
      width={1200}
      height={600}
      priority
    />
  );
}

priority属性はファーストビューの画像をプリロードし、Largest Contentful Paintを改善します。

リモートパターン設定

外部画像はセキュリティのため、next.config.jsで明示的なドメイン許可が必要です。

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "cdn.example.com",
        pathname: "/images/**",
      },
    ],
  },
};

ワイルドカードとパスマッチングにより、未知のドメインへの最適化リクエストを防ぎます。

静的インポート vs 動的URL

静的にインポートされたローカル画像は完全な自動最適化を受けます。CMSやAPIからの動的URLは手動設定が必要です。

// 静的インポート — 完全自動最適化
import hero from "@/public/hero.jpg";
<Image src={hero} placeholder="blur" alt="ヒーロー" />

// 動的URL — 手動設定が必要
<Image
  src="https://cdn.example.com/image.jpg"
  width={800}
  height={600}
  alt="リモート画像"
/>

sizes属性によるレスポンシブ画像

sizes属性はブラウザにビューポート幅に応じた画像サイズを指示します。適切な設定でモバイルの画像ペイロードを40〜60%削減できます。

<Image
  src="/image.jpg"
  fill
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
  alt="レスポンシブ画像"
/>

フォーマットサポート：AVIFとWebP

Next.jsはブラウザのAcceptヘッダーに基づいて自動的にフォーマットを選択します。優先順位はAVIF、WebP、元の形式です。

module.exports = {
  images: {
    formats: ["image/avif", "image/webp"],
  },
};

AVIFは同等品質でWebPより30〜50%優れた圧縮を提供します。

Core Web Vitalsへの影響

適切な画像最適化は全てのCore Web Vitalsに直接影響します。LCPにはpriority属性と次世代フォーマット、CLSには幅と高さの指定、INPには画面外画像のレイジーロードが効果的です。

まとめ

Next.jsの画像最適化パイプラインは強固な基盤を提供します。リモートパターンを適切に設定し、静的インポートを活用し、sizes属性でレスポンシブ画像戦略を実装し、AVIFとWebPの自動フォーマット交渉を活用することで、優れたパフォーマンスを達成できます。