next/image vs 外部CDNを徹底比較！Next.js画像最適化戦略を考えてみた

2025年4月12日

Next.js

next/image vs 外部CDNを徹底比較！Next.js画像最適化戦略を考えてみた

Webサイトのパフォーマンスにおいて、画像の最適化は極めて重要です。特にNext.jsを利用している場合、公式が提供するnext/imageコンポーネントによって効率的な最適化が可能になります。

しかし、外部のCDN（Content Delivery Network）を利用することで、より柔軟で高性能な戦略を取ることもできます。この記事では、next/imageと外部CDNの両方のアプローチを深く掘り下げ、状況に応じた最適な選択肢を導き出せるように構成しております。

Next.js標準の画像最適化`next/image`

Next.jsが提供するnext/imageは、ビルドインで画像の最適化を行ってくれる非常に便利なコンポーネントです。

主な特徴

特徴	内容
自動リサイズ	表示サイズに応じて最適なサイズの画像を提供
遅延読み込み（Lazy Load）	スクロール位置に応じて読み込み
モダンフォーマット対応	WebPやAVIFに自動変換
キャッシュ制御	ヘッダーでのキャッシュ設定に対応

サンプルコード

tsximport Image from 'next/image';

export default function HeroImage() {
  return (
    <Image
      src="/images/hero.jpg"
      alt="ヒーロー画像"
      width={1200}
      height={800}
      priority
    />
  );
}

解説

この例では、プロジェクト内のpublic/images/hero.jpgを使っており、widthとheightを指定することで、ビルド時に最適化された画像が生成されます。 priorityを設定すると、ファーストビューに表示される重要な画像として先読みされます。

外部CDNを活用した画像最適化

Next.jsでは外部CDNとの統合も非常に柔軟に対応できます。 Cloudinary、Imgix、ImageKitなどが代表的な選択肢です。

Cloudinaryとの統合例

CloudinaryはURLベースで画像の変換・圧縮・サイズ調整などが可能なCDNです。

tsximport Image from 'next/image';

export default function CloudinaryImage() {
  return (
    <Image
      src="https://res.cloudinary.com/demo/image/upload/w_800,h_600,c_fill/sample.jpg"
      alt="Cloudinary画像"
      width={800}
      height={600}
    />
  );
}

解説

この例では、Cloudinaryの画像URLをそのままsrcに指定しています。 Next.jsは外部ドメインの画像も最適化できるため、next.config.jsにドメインを追加する必要があります。

js// next.config.js
module.exports = {
  images: {
    domains: ['res.cloudinary.com'],
  },
};

設定を行うことで、外部CDNを使いながらも、next/imageの最適化の恩恵を受けられます。

`next/image`とCDNの比較一覧

項目	next/image	外部CDN
導入の容易さ	◎（ビルトイン）	△（別途契約と設定）
柔軟性	○	◎（URLベース変換や複雑な加工が可能）
パフォーマンス	◎（Next.js最適化）	◎（グローバル配信）
SEO最適化	◎	◎
拡張性	△	◎