メインコンテンツまでスキップ

画像の最適化

例

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

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

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

🎥 視聴： next/imageの使い方について詳しく学びましょう → YouTube (9分)。

使用法​

import Image from 'next/image'

その後、画像のsrcを（ローカルまたはリモート）定義できます。

ローカル画像​

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

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

app/page.js
import Image from 'next/image'
import profilePic from './me.png'

export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="著者の写真"
      // width={500} 自動的に提供されます
      // height={500} 自動的に提供されます
      // blurDataURL="data:..." 自動的に提供されます
      // placeholder="blur" // 読み込み中のオプションのぼかし
    />
  )
}

警告： 動的な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="著者の写真"
      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アプリケーションのデフォルトローダーは、組み込みのImage Optimization 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="著者の写真" priority />
}

next/imageコンポーネントのドキュメントで優先度について詳しく学びましょう。

画像のサイズ設定​

画像がパフォーマンスに悪影響を与える最も一般的な方法の1つは、レイアウトシフトです。これは、画像が読み込まれるときにページ上の他の要素を押しのけることです。このパフォーマンス問題はユーザーにとって非常に迷惑であるため、累積レイアウトシフトと呼ばれる独自のCore Web Vitalがあります。画像ベースのレイアウトシフトを回避する方法は、常に画像のサイズを設定することです。これにより、ブラウザは画像が読み込まれる前に正確に十分なスペースを確保できます。

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

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

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

画像のサイズを知らずにソースから画像にアクセスしている場合、いくつかの方法があります：

fillを使用する

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

画像を正規化する

制御可能なソースから画像を提供している場合、画像パイプラインを変更して画像を特定のサイズに正規化することを検討してください。

API呼び出しを変更する

アプリケーションがAPI呼び出し（CMSなど）を使用して画像URLを取得している場合、URLと一緒に画像の寸法を返すようにAPI呼び出しを変更できるかもしれません。

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

スタイリング​

Imageコンポーネントのスタイリングは通常の<img>要素のスタイリングに似ていますが、いくつかのガイドラインを考慮する必要があります：

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

例​

レスポンシブ​

親コンテナの幅と高さを埋めるレスポンシブ画像親コンテナの幅と高さを埋めるレスポンシブ画像 
import Image from 'next/image'
import mountains from '../public/mountains.jpg'

export default function Responsive() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <Image
        alt="山"
        // 画像をインポートすると
        // 自動的に幅と高さが設定されます
        src={mountains}
        sizes="100vw"
        // 画像を全幅で表示
        style={{
          width: '100%',
          height: 'auto',
        }}
      />
    </div>
  )
}

コンテナを埋める​

親コンテナの幅を埋める画像のグリッド親コンテナの幅を埋める画像のグリッド 
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="山"
          src={mountains}
          fill
          sizes="(min-width: 808px) 50vw, 100vw"
          style={{
            objectFit: 'cover', // cover, contain, none
          }}
        />
      </div>
      {/* グリッド内の他の画像... */}
    </div>
  )
}

背景画像​

ページの全幅と高さを占める背景画像ページの全幅と高さを占める背景画像 
import Image from 'next/image'
import mountains from '../public/mountains.jpg'

export default function Background() {
  return (
    <Image
      alt="山"
      src={mountains}
      placeholder="blur"
      quality={100}
      fill
      sizes="100vw"
      style={{
        objectFit: 'cover',
      }}
    />
  )
}

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

その他のプロパティ​

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

設定​

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

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