画像最適化の方法

Next.jsの<Image>コンポーネントはHTMLの<img>要素を拡張し、以下の機能を提供します：

サイズ最適化: WebPなどの最新画像フォーマットを使用し、各デバイスに適切なサイズの画像を自動的に配信
視覚的安定性: 画像読み込み時のレイアウトシフトを自動的に防止
高速なページ読み込み: ブラウザのネイティブな遅延読み込みを使用して、ビューポートに入った画像のみを読み込み、オプションでブラーアッププレースホルダーを表示
アセットの柔軟性: リモートサーバーに保存されている画像でもオンデマンドでサイズ変更可能

<Image>を使用するには、next/imageからインポートし、コンポーネント内でレンダリングします。

import Image from 'next/image'

export default function Page() {
  return <Image src="" alt="" />
}

srcプロパティにはローカルまたはリモートの画像を指定できます。

🎥 動画: next/imageの使用方法についてさらに学ぶ → YouTube (9分).

ローカル画像

画像やフォントなどの静的ファイルは、ルートディレクトリのpublicフォルダ以下に保存できます。public内のファイルは、ベースURL（/）から始まるパスで参照できます。

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="/profile.png"
      alt="著者の写真"
      width={500}
      height={500}
    />
  )
}

静的インポート画像

ローカルの画像ファイルをインポートして使用することもできます。Next.jsはインポートされたファイルに基づいて、自動的に画像の固有のwidthとheightを決定します。これらの値は画像のアスペクト比を決定し、画像読み込み時の累積レイアウトシフト（CLS）を防ぐために使用されます。

import Image from 'next/image'
import ProfileImage from './profile.png'

export default function Page() {
  return (
    <Image
      src={ProfileImage}
      alt="著者の写真"
      // width={500} 自動的に提供
      // height={500} 自動的に提供
      // blurDataURL="data:..." 自動的に提供
      // placeholder="blur" // 読み込み中のブラーアップ（オプション）
    />
  )
}

この場合、Next.jsはapp/profile.pngファイルが利用可能であることを期待します。

リモート画像

リモート画像を使用するには、srcプロパティにURL文字列を指定します。

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="著者の写真"
      width={500}
      height={500}
    />
  )
}

Next.jsはビルド時にリモートファイルにアクセスできないため、width、height、およびオプションのblurDataURLプロパティを手動で指定する必要があります。widthとheightは、画像の正しいアスペクト比を推測し、画像読み込み時のレイアウトシフトを防ぐために使用されます。

リモートサーバーからの画像を安全に許可するには、next.config.jsでサポートするURLパターンのリストを定義する必要があります。悪意のある使用を防ぐため、可能な限り具体的に指定してください。例えば、以下の設定では特定のAWS S3バケットからのみ画像を許可します：

import type { NextConfig } from 'next'

const config: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
        search: '',
      },
    ],
  },
}

export default config

Image

Next.js アプリケーションで組み込みの `next/image` コンポーネントを使用して画像を最適化する方法。

ローカル画像

静的インポート画像

リモート画像

Image

On this page