コンテンツにスキップ
アプリケーションの構築最適化画像

画像最適化

例

Web Almanac によると、画像は一般的なウェブサイトの ページサイズ の大部分を占め、ウェブサイトの LCP パフォーマンス に大きな影響を与える可能性があります。

Next.js Image コンポーネントは、HTML <img> 要素を自動画像最適化機能で拡張します

  • サイズ最適化: WebP のような最新の画像形式を使用して、デバイスごとに適切なサイズの画像を自動的に提供します。
  • 視覚的安定性: 画像の読み込み時に レイアウトシフト が自動的に発生するのを防ぎます。
  • 高速なページ読み込み: ネイティブブラウザの遅延読み込みを使用して、画像はビューポートに入ったときにのみ読み込まれ、オプションでぼかしアップのプレースホルダーも利用できます。
  • アセットの柔軟性: リモートサーバーに保存されている画像でも、オンデマンドで画像サイズを変更できます。

🎥 動画: next/image の使用方法について詳しく学ぶ → YouTube (9分)。

使用法 

import Image from 'next/image'

次に、画像の src (ローカルまたはリモート) を定義できます。

ローカル画像

ローカル画像を使用するには、.jpg、.png、または .webp の画像ファイルを import します。

Next.js は、インポートされたファイルに基づいて画像の固有の width と height を自動的に決定します。これらの値は、画像の比率を決定し、画像の読み込み中に Cumulative Layout Shift を防ぐために使用されます。

app/page.js
import Image from 'next/image'
import profilePic from './me.png'
 
export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
      // width={500} automatically provided
      // height={500} automatically provided
      // blurDataURL="data:..." automatically provided
      // placeholder="blur" // Optional blur-up while loading
    />
  )
}

警告: 動的な await import() または require() は サポートされていません。import はビルド時に解析できるように静的である必要があります。

オプションで、next.config.js ファイルで localPatterns を設定し、特定の画像を許可し、それ以外のすべてをブロックすることができます。

next.config.js
module.exports = {
  images: {
    localPatterns: [
      {
        pathname: '/assets/images/**',
        search: '',
      },
    ],
  },
}

リモート画像

リモート画像を使用する場合、src プロパティは URL 文字列である必要があります。

Next.js はビルドプロセス中にリモートファイルにアクセスできないため、width、height、およびオプションの blurDataURL プロパティを手動で提供する必要があります。

width と height 属性は、画像の正しいアスペクト比を推定し、画像読み込みによるレイアウトシフトを回避するために使用されます。width と height は、画像ファイルのレンダリングサイズを 決定しません。画像サイズ指定について詳しく学びましょう。

app/page.js
import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

画像を安全に最適化できるようにするには、next.config.js でサポートされる URL パターンのリストを定義します。悪意のある使用を防ぐために、できるだけ具体的に記述してください。たとえば、次の設定では、特定の AWS S3 バケットからの画像のみが許可されます。

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

remotePatterns の設定について詳しく学びましょう。画像の src に相対 URL を使用したい場合は、loader を使用してください。

ドメイン

リモート画像を最適化したい場合でも、組み込みの Next.js Image Optimization API を使用したい場合があります。これを行うには、loader をデフォルト設定のままにし、Image の src プロパティに絶対 URL を入力します。

悪意のあるユーザーからアプリケーションを保護するために、next/image コンポーネントで使用するリモートホスト名のリストを定義する必要があります。

remotePatterns の設定について詳しく学びましょう。

ローダー

以前の例では、ローカル画像に部分的な URL ("/me.png") が提供されていることに注意してください。これはローダーアーキテクチャのおかげで可能です。

ローダーは、画像の URL を生成する関数です。提供された src を変更し、異なるサイズで画像をリクエストするための複数の URL を生成します。これらの複数の URL は、自動 srcset 生成で使用され、サイトの訪問者にビューポートに適切なサイズの画像が提供されるようになります。

Next.js アプリケーションのデフォルトローダーは、組み込みの画像最適化 API を使用します。これにより、ウェブ上のどこからでも画像を最適化し、Next.js ウェブサーバーから直接提供します。CDN または画像サーバーから直接画像を配信したい場合は、数行の JavaScript で独自のローダー関数を記述できます。

ローダーは、loader プロパティで画像ごとに定義することも、loaderFile 設定でアプリケーションレベルで定義することもできます。

優先度

各ページで 最大コンテンツペイント (LCP) 要素 となる画像に priority プロパティを追加する必要があります。これにより、Next.js は画像を プリロード できるようになり、LCP の大幅な向上が期待できます。

LCP 要素は通常、ページのビューポート内で最も大きい画像またはテキストブロックです。next dev を実行すると、LCP 要素が priority プロパティのない <Image> である場合にコンソールに警告が表示されます。

LCP 画像を特定したら、次のようにプロパティを追加できます。

app/page.js
import Image from 'next/image'
import profilePic from '../public/me.png'
 
export default function Page() {
  return <Image src={profilePic} alt="Picture of the author" priority />
}

優先度については、next/image コンポーネントのドキュメントで詳細を参照してください。

画像サイズ指定

画像がパフォーマンスを損なう最も一般的な方法の1つは、レイアウトシフトです。これは、画像が読み込まれる際に他の要素をページ上で動かしてしまう現象です。このパフォーマンスの問題はユーザーにとって非常に迷惑なので、Cumulative Layout Shift と呼ばれる独自の Core Web Vital があります。画像によるレイアウトシフトを避ける方法は、常に画像のサイズを指定することです。これにより、ブラウザは画像が読み込まれる前に正確に十分なスペースを予約できます。

next/image は優れたパフォーマンス結果を保証するように設計されているため、レイアウトシフトを引き起こすような方法では使用できず、次の3つの方法のいずれかでサイズを 指定する必要があります。

  1. 静的インポートを使用して自動的に
  2. 画像のアスペクト比を決定するために使用される width および height プロパティを含めることで手動で
  3. fill を使用して暗黙的に。これにより、画像が親要素に合わせて拡大されます。

画像のサイズがわからない場合はどうすればよいですか？

画像のサイズが不明なソースから画像にアクセスしている場合、いくつかできることがあります。

fill を使用する

fill プロパティを使用すると、画像は親要素によってサイズ変更されます。CSS を使用して、画像の親要素にページ上のスペースを与え、sizes プロパティでメディアクエリのブレークポイントに合わせることを検討してください。object-fit を fill、contain、または cover と共に使用し、object-position を使用して画像がそのスペースをどのように占めるかを定義することもできます。

画像を正規化する

管理しているソースから画像を配信している場合、画像を特定のサイズに正規化するように画像パイプラインを変更することを検討してください。

API コールを変更する

アプリケーションが API コール (CMS など) を使用して画像 URL を取得している場合、API コールを変更して、URL とともに画像サイズを返すことができる場合があります。

提案された方法のいずれも画像のサイズ指定に機能しない場合でも、next/image コンポーネントは、標準の <img> 要素と組み合わせてページでうまく機能するように設計されています。

スタイリング

Image コンポーネントのスタイリングは通常の <img> 要素のスタイリングと似ていますが、いくつか注意すべきガイドラインがあります。

  • styled-jsx ではなく、className または style を使用します。
    • ほとんどの場合、className プロパティを使用することをお勧めします。これはインポートされた CSS モジュール、グローバルスタイルシートなどになります。
    • style プロパティを使用してインラインスタイルを割り当てることもできます。
    • styled-jsx は現在のコンポーネントにスコープされているため (スタイルを global としてマークしない限り)、使用できません。
  • fill を使用する場合、親要素は position: relative である必要があります。
    • これは、そのレイアウトモードでの画像要素の適切なレンダリングに必要です。
  • fill を使用する場合、親要素は display: block である必要があります。
    • これは <div> 要素のデフォルトですが、それ以外の場合は指定する必要があります。

例

レスポンシブ

Responsive image filling the width and height of its parent container
import Image from 'next/image'
import mountains from '../public/mountains.jpg'
 
export default function Responsive() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <Image
        alt="Mountains"
        // Importing an image will
        // automatically set the width and height
        src={mountains}
        sizes="100vw"
        // Make the image display full width
        style={{
          width: '100%',
          height: 'auto',
        }}
      />
    </div>
  )
}

コンテナを埋める

Grid of images filling parent container width
import Image from 'next/image'
import mountains from '../public/mountains.jpg'
 
export default function Fill() {
  return (
    <div
      style={{
        display: 'grid',
        gridGap: '8px',
        gridTemplateColumns: 'repeat(auto-fit, minmax(400px, auto))',
      }}
    >
      <div style={{ position: 'relative', height: '400px' }}>
        <Image
          alt="Mountains"
          src={mountains}
          fill
          sizes="(min-width: 808px) 50vw, 100vw"
          style={{
            objectFit: 'cover', // cover, contain, none
          }}
        />
      </div>
      {/* And more images in the grid... */}
    </div>
  )
}

背景画像

Background image taking full width and height of page
import Image from 'next/image'
import mountains from '../public/mountains.jpg'
 
export default function Background() {
  return (
    <Image
      alt="Mountains"
      src={mountains}
      placeholder="blur"
      quality={100}
      fill
      sizes="100vw"
      style={{
        objectFit: 'cover',
      }}
    />
  )
}

さまざまなスタイルで使用されている Image コンポーネントの例については、Image Component Demo を参照してください。

その他のプロパティ

next/image コンポーネントで利用可能なすべてのプロパティを表示します。

設定

next/image コンポーネントと Next.js 画像最適化 API は、next.config.js ファイルで設定できます。これらの設定により、リモート画像を有効にしたり、カスタム画像ブレークポイントを定義したり、キャッシュ動作を変更したりなどが可能です。

詳細については、完全な画像設定ドキュメントを参照してください。

API リファレンス

next/image API について詳しく学びましょう。

Image

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