Sponsor
ChatHubChatHub — Use GPT-4, Gemini, Claude 3.5 and more chatbots side-by-side
ここをクリック
Menu

Image (レガシー)

例

Next.js 13から、next/imageコンポーネントはパフォーマンスと開発者エクスペリエンスを向上させるために書き直されました。後方互換性のあるアップグレードソリューションを提供するため、古いnext/imageはnext/legacy/imageに名前が変更されました。

新しい next/image APIリファレンスを参照してください。

比較

next/legacy/imageと比較して、新しいnext/imageコンポーネントには以下の変更があります：

  • <img>の周りの<span>ラッパーを削除し、ネイティブの計算されたアスペクト比を採用
  • 標準的なstyleプロップのサポートを追加
    • layoutプロップをstyleまたはclassNameに置き換え
    • objectFitプロップをstyleまたはclassNameに置き換え
    • objectPositionプロップをstyleまたはclassNameに置き換え
  • IntersectionObserverの実装をネイティブの遅延読み込みに置き換え
    • ネイティブの同等のものがないためlazyBoundaryプロップを削除
    • ネイティブの同等のものがないためlazyRootプロップを削除
  • loader設定をloaderプロップに置き換え
  • altプロップをオプションから必須に変更
  • onLoadingCompleteコールバックを<img>要素への参照を受け取るように変更

必須プロップ

<Image />コンポーネントには、以下のプロパティが必要です。

src

以下のいずれかである必要があります：

  • 静的にインポートされた画像ファイル
  • パス文字列。これは、loaderプロップまたはloader設定に応じて、絶対的な外部URL、または内部パスのいずれかになります。

デフォルトのloaderを使用する場合、ソース画像について以下も考慮してください：

  • srcが外部URLの場合、remotePatternsも設定する必要があります
  • srcがアニメーションまたは既知の形式（JPEG、PNG、WebP、AVIF、GIF、TIFF）でない場合、画像はそのまま提供されます
  • srcがSVG形式の場合、unoptimizedまたはdangerouslyAllowSVGが有効でない限りブロックされます

width

widthプロパティは、layoutとsizesプロパティに応じて、_レンダリングされた_幅または_元の_幅をピクセル単位で表します。

layout="intrinsic"またはlayout="fixed"を使用する場合、widthプロパティはピクセル単位の_レンダリングされた_幅を表すため、画像の大きさに影響します。

layout="responsive"、layout="fill"を使用する場合、widthプロパティはピクセル単位の_元の_幅を表すため、アスペクト比にのみ影響します。

widthプロパティは、静的にインポートされた画像またはlayout="fill"の画像を除いて必須です。

height

heightプロパティは、layoutとsizesプロパティに応じて、_レンダリングされた_高さまたは_元の_高さをピクセル単位で表します。

layout="intrinsic"またはlayout="fixed"を使用する場合、heightプロパティはピクセル単位の_レンダリングされた_高さを表すため、画像の大きさに影響します。

layout="responsive"、layout="fill"を使用する場合、heightプロパティはピクセル単位の_元の_高さを表すため、アスペクト比にのみ影響します。

heightプロパティは、静的にインポートされた画像またはlayout="fill"の画像を除いて必須です。

オプションプロップ

<Image />コンポーネントは、必須のプロパティ以外にも多くの追加プロパティを受け入れます。このセクションでは、Imageコンポーネントの最も一般的に使用されるプロパティについて説明します。めったに使用されないプロパティの詳細については、高度なプロップセクションを参照してください。

layout

ビューポートのサイズ変更に応じた画像のレイアウト動作。

layout動作srcSetsizesラッパーとサイザーの有無
intrinsic（デフォルト）コンテナの幅に合わせて_縮小_、画像サイズまで1x、2x（imageSizesに基づく）N/Aあり
fixedwidthとheightに正確にサイズ設定1x、2x（imageSizesに基づく）N/Aあり
responsiveコンテナの幅に合わせて拡大縮小640w、750w、... 2048w、3840w（imageSizesとdeviceSizesに基づく）100vwあり
fillコンテナを埋めるようにX軸とY軸の両方に拡大640w、750w、... 2048w、3840w（imageSizesとdeviceSizesに基づく）100vwあり
  • intrinsicレイアウトのデモ（デフォルト）
    • intrinsicの場合、画像は小さいビューポートで寸法を縮小し、大きいビューポートでは元の寸法を維持します。
  • fixedレイアウトのデモ
    • fixedの場合、ビューポートの変更に応じて画像の寸法は変化しません（レスポンシブ性なし）。ネイティブのimg要素に似ています。
  • responsiveレイアウトのデモ
    • responsiveの場合、画像は小さいビューポートで寸法を縮小し、大きいビューポートで拡大します。
    • スタイルシートで親要素にdisplay: blockを使用していることを確認してください。
  • fillレイアウトのデモ
    • fillの場合、親要素が相対的であれば、画像は親要素の寸法に合わせて幅と高さを拡大します。
    • これは通常、objectFitプロパティと組み合わせて使用されます。
    • スタイルシートで親要素にposition: relativeを使用していることを確認してください。
  • 背景画像のデモ

loader

URLを解決するためのカスタム関数。Imageコンポーネントのプロップとしてloaderを設定すると、next.config.jsのimagesセクションで定義されたデフォルトのloaderを上書きします。

loaderは、以下のパラメータを指定して画像のURL文字列を返す関数です：

カスタムloaderの使用例：

import Image from 'next/legacy/image'
 
const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}
 
const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="me.png"
      alt="作者の写真"
      width={500}
      height={500}
    />
  )
}

sizes

異なるブレイクポイントでの画像の幅に関する情報を提供する文字列。sizesの値は、layout="responsive"またはlayout="fill"の画像のパフォーマンスに大きく影響します。layout="intrinsic"またはlayout="fixed"の画像では無視されます。

sizesプロパティは、画像のパフォーマンスに関して2つの重要な目的を果たします：

まず、sizesの値はブラウザがnext/legacy/imageから自動生成されたソースセットからどのサイズの画像をダウンロードするかを決定するために使用されます。ブラウザが選択する際、ページ上の画像のサイズをまだ知らないため、ビューポートと同じサイズまたはそれ以上の画像を選択します。sizesプロパティを使用すると、画像が実際には画面全体よりも小さいことをブラウザに伝えることができます。sizes値を指定しない場合、デフォルト値の100vw（画面全体の幅）が使用されます。

次に、sizesの値は解析され、自動的に作成されたソースセットの値をトリミングするために使用されます。sizesプロパティにビューポート幅の割合を表す50vwなどのサイズが含まれている場合、必要以上に小さい値はソースセットからトリミングされます。

例えば、スタイリングによってモバイルデバイスでは画像が全幅、タブレットでは2列レイアウト、デスクトップディスプレイでは3列レイアウトになることがわかっている場合、以下のようなsizesプロパティを含める必要があります：

import Image from 'next/legacy/image'
const Example = () => (
  <div className="grid-element">
    <Image
      src="/example.png"
      layout="fill"
      sizes="(max-width: 768px) 100vw,
              (max-width: 1200px) 50vw,
              33vw"
    />
  </div>
)

この例のsizesは、パフォーマンス指標に劇的な影響を与える可能性があります。33vwのサイズがない場合、サーバーから選択される画像は必要以上に3倍の幅になります。ファイルサイズは幅の2乗に比例するため、sizesがない場合、ユーザーは必要以上に9倍大きな画像をダウンロードすることになります。

srcsetとsizesの詳細：

quality

最適化された画像の品質。1から100の整数で、100が最高品質。デフォルトは75です。

priority

trueの場合、画像は高優先度と見なされ、プリロードされます。priorityを使用する画像では、遅延読み込みは自動的に無効になります。

最大コンテンツ描画（Largest Contentful Paint (LCP)）要素として検出された画像には、priorityプロパティを使用する必要があります。異なるビューポートサイズでは異なる画像がLCP要素になる可能性があるため、複数の優先画像を持つことが適切な場合もあります。

フォールドの上に表示される画像にのみ使用する必要があります。デフォルトはfalseです。

placeholder

画像の読み込み中に使用するプレースホルダー。可能な値はblurまたはemptyです。デフォルトはemptyです。

blurの場合、blurDataURLプロパティがプレースホルダーとして使用されます。srcが静的インポートからのオブジェクトで、インポートされた画像が.jpg、.png、.webp、または.avifの場合、blurDataURLは自動的に設定されます。

動的画像の場合、blurDataURLプロパティを提供する必要があります。Plaiceholderなどのソリューションがbase64の生成に役立ちます。

emptyの場合、画像の読み込み中にプレースホルダーはなく、空のスペースのみになります。

試してみましょう：

高度なプロパティ

場合によっては、より高度な使用が必要になることがあります。<Image />コンポーネントは、以下の高度なプロパティをオプションで受け入れます。

style

基礎となる画像要素にCSSスタイルを渡すことを可能にします。

すべてのlayoutモードが画像要素に独自のスタイルを適用し、これらの自動スタイルがstyleプロパティよりも優先されることに注意してください。

また、必須のwidthとheightプロパティがスタイリングと相互作用する可能性があることにも注意してください。画像のwidthをスタイリングで変更する場合は、height="auto"スタイルも設定する必要があります。そうしないと、画像が歪む可能性があります。

objectFit

layout="fill"を使用する際に、画像が親コンテナにどのように収まるかを定義します。

この値は、src画像のobject-fit CSSプロパティに渡されます。

objectPosition

layout="fill"を使用する際に、画像が親要素内でどのように配置されるかを定義します。

この値は、画像に適用されるobject-position CSSプロパティに渡されます。

onLoadingComplete

画像が完全に読み込まれ、プレースホルダーが削除された後に呼び出されるコールバック関数。

onLoadingComplete関数は、以下のプロパティを持つオブジェクト1つをパラメーターとして受け取ります：

loading

画像の読み込み動作。デフォルトはlazyです。

lazyの場合、画像がビューポートから計算された距離に達するまで画像の読み込みを遅延します。

eagerの場合、画像を即座に読み込みます。

詳細情報

blurDataURL

src画像が正常に読み込まれる前にプレースホルダー画像として使用されるデータURL。placeholder="blur"と組み合わせた場合にのみ効果があります。

base64エンコードされた画像である必要があります。拡大されてぼかされるため、非常に小さな画像（10ピクセル以下）が推奨されます。プレースホルダーとしてより大きな画像を含めると、アプリケーションのパフォーマンスに悪影響を与える可能性があります。

試してみましょう：

単色のデータURLを生成して画像に合わせることもできます。

lazyBoundary

ビューポートと画像の交差を検出し、遅延読み込みをトリガーするための境界ボックスとして機能する文字列（マージンプロパティに似た構文）。デフォルトは"200px"です。

画像がルートドキュメント以外のスクロール可能な親要素にネストされている場合、lazyRootプロパティも割り当てる必要があります。

詳細情報

lazyRoot

スクロール可能な親要素を指す React Ref。デフォルトはnull（ドキュメントビューポート）。

Refは、DOM要素またはRefを基礎となるDOM要素に転送するReactコンポーネントを指す必要があります。

DOM要素を指す例

import Image from 'next/legacy/image'
import React from 'react'
 
const Example = () => {
  const lazyRoot = React.useRef(null)
 
  return (
    <div ref={lazyRoot} style={{ overflowX: 'scroll', width: '500px' }}>
      <Image lazyRoot={lazyRoot} src="/one.jpg" width="500" height="500" />
      <Image lazyRoot={lazyRoot} src="/two.jpg" width="500" height="500" />
    </div>
  )
}

Reactコンポーネントを指す例

import Image from 'next/legacy/image'
import React from 'react'
 
const Container = React.forwardRef((props, ref) => {
  return (
    <div ref={ref} style={{ overflowX: 'scroll', width: '500px' }}>
      {props.children}
    </div>
  )
})
 
const Example = () => {
  const lazyRoot = React.useRef(null)
 
  return (
    <Container ref={lazyRoot}>
      <Image lazyRoot={lazyRoot} src="/one.jpg" width="500" height="500" />
      <Image lazyRoot={lazyRoot} src="/two.jpg" width="500" height="500" />
    </Container>
  )
}

詳細情報

unoptimized

trueの場合、ソース画像は、品質、サイズ、形式を変更せずにsrcからそのまま提供されます。デフォルトはfalseです。

これは、最適化の恩恵を受けない画像（1KB未満の小さな画像、ベクター画像（SVG）、アニメーション画像（GIF）など）に役立ちます。

import Image from 'next/image'
 
const UnoptimizedImage = (props) => {
  return <Image {...props} unoptimized />
}

Next.js 12.3.0以降、next.config.jsを以下の設定で更新することで、このプロパティをすべての画像に割り当てることができます：

next.config.js
module.exports = {
  images: {
    unoptimized: true,
  },
}

その他のプロパティ

<Image />コンポーネントの他のプロパティは、以下を除いて基礎となるimg要素に渡されます：

設定オプション

リモートパターン

悪意のあるユーザーからアプリケーションを保護するために、外部画像を使用するには設定が必要です。これにより、アカウントからのみ外部画像がNext.js Image Optimization APIから提供されることを保証します。これらの外部画像は、以下に示すようにnext.config.jsファイルのremotePatternsプロパティで設定できます：

next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/account123/**',
        search: '',
      },
    ],
  },
}

補足: 上記の例では、next/legacy/imageのsrcプロパティがhttps://example.com/account123/で始まり、クエリ文字列を持たないことを保証します。他のプロトコル、ホスト名、ポート、または一致しないパスは、400 Bad Requestで応答します。

以下は、next.config.jsファイルのremotePatternsプロパティでワイルドカードパターンを使用するホスト名の例です：

next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.example.com',
        port: '',
        search: '',
      },
    ],
  },
}

補足: 上記の例では、next/legacy/imageのsrcプロパティがhttps://img1.example.comまたはhttps://me.avatar.example.com、あるいは任意の数のサブドメインで始まることを保証します。ポートやクエリ文字列を持つことはできません。他のプロトコルまたは一致しないホスト名は、400 Bad Requestで応答します。

ワイルドカードパターンはpathnameとhostnameの両方で使用でき、以下の構文を持ちます：

  • *は、単一のパスセグメントまたはサブドメインと一致します
  • **は、末尾の任意の数のパスセグメントまたは先頭の任意の数のサブドメインと一致します

**構文はパターンの途中では機能しません。

補足: protocol、port、pathname、またはsearchを省略すると、ワイルドカード**が暗黙的に適用されます。これは意図しないURLを最適化する悪意のあるアクターを許可する可能性があるため、推奨されません。

以下は、next.config.jsファイルのremotePatternsプロパティでsearchを使用する例です：

next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'assets.example.com',
        search: '?v=1727111025337',
      },
    ],
  },
}

補足: 上記の例では、next/legacy/imageのsrcプロパティがhttps://assets.example.comで始まり、正確なクエリ文字列?v=1727111025337を持つことを保証します。他のプロトコルまたはクエリ文字列は、400 Bad Requestで応答します。

ドメイン

警告: Next.js 14以降、悪意のあるユーザーからアプリケーションを保護するために、厳密なremotePatternsの代わりに非推奨となりました。ドメインから提供されるすべてのコンテンツを所有している場合にのみ、domainsを使用してください。

remotePatternsと同様に、domains設定を使用して外部画像の許可されたホスト名のリストを提供できます。

ただし、domains設定はワイルドカードパターンマッチングをサポートせず、プロトコル、ポート、またはパス名を制限することもできません。

以下は、next.config.jsファイルのdomainsプロパティの例です：

next.config.js
module.exports = {
  images: {
    domains: ['assets.acme.com'],
  },
}

ローダー設定

クラウドプロバイダーを使用して、Next.jsの組み込み画像最適化APIの代わりに画像を最適化する場合、next.config.jsファイルでloaderとパスプレフィックスを設定できます。これにより、画像のsrcに相対URLを使用し、プロバイダー用の正確な絶対URLを自動生成できます。

next.config.js
module.exports = {
  images: {
    loader: 'imgix',
    path: 'https://example.com/myaccount/',
  },
}

組み込みローダー

以下の画像最適化クラウドプロバイダーが含まれています：

  • デフォルト：next dev、next start、またはカスタムサーバーで自動的に動作
  • Vercel：Vercelにデプロイする際に自動的に動作し、設定は不要。詳細情報
  • Imgix：loader: 'imgix'
  • Cloudinary：loader: 'cloudinary'
  • Akamai：loader: 'akamai'
  • カスタム：loader: 'custom'でnext/legacy/imageコンポーネントのloaderプロパティを使用してカスタムクラウドプロバイダーを利用

別のプロバイダーが必要な場合は、next/legacy/imageでloaderプロパティを使用できます。

output: 'export'を使用する場合、ビルド時に画像を最適化することはできず、オンデマンドのみとなります。output: 'export'でnext/legacy/imageを使用するには、デフォルト以外のローダーを使用する必要があります。詳細は議論を参照してください。

詳細設定

以下の設定は高度な使用例向けで、通常は必要ありません。以下のプロパティを設定する場合、将来のアップデートでNext.jsのデフォルト変更が上書きされます。

デバイスサイズ

ユーザーの予想デバイス幅を知っている場合、next.config.jsのdeviceSizesプロパティでデバイス幅のブレイクポイントのリストを指定できます。これらの幅は、next/legacy/imageコンポーネントがlayout="responsive"またはlayout="fill"を使用する際に、ユーザーのデバイスに適切な画像を提供するために使用されます。

設定がない場合、以下のデフォルト値が使用されます。

next.config.js
module.exports = {
  images: {
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
  },
}

画像サイズ

next.config.jsファイルのimages.imageSizesプロパティを使用して、画像の幅のリストを指定できます。これらの幅は、デバイスサイズの配列と連結され、画像のsrcsetを生成するためのサイズの完全な配列を形成します。

2つの別々のリストがある理由は、imageSizesはsizesプロパティを提供する画像にのみ使用され、画像が画面の全幅未満であることを示します。したがって、imageSizesのサイズはdeviceSizesの最小サイズよりも小さくする必要があります。

設定がない場合、以下のデフォルト値が使用されます。

next.config.js
module.exports = {
  images: {
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
}

許容フォーマット

デフォルトの画像最適化APIは、リクエストのAcceptヘッダーを介してブラウザーがサポートする画像フォーマットを自動的に検出し、最適な出力フォーマットを決定します。

Acceptヘッダーが複数の設定フォーマットと一致する場合、配列内の最初の一致が使用されます。したがって、配列の順序が重要です。一致するものがない場合（またはソース画像がアニメーションの場合）、画像最適化APIは元の画像のフォーマットにフォールバックします。

設定がない場合、以下のデフォルト値が使用されます。

next.config.js
module.exports = {
  images: {
    formats: ['image/webp'],
  },
}

AVIFサポートを有効にできます。ブラウザがAVIFをサポートしていない場合、ソース画像の元のフォーマットにフォールバックします：

next.config.js
module.exports = {
  images: {
    formats: ['image/avif'],
  },
}

補足：

  • ほとんどのユースケースではWebPの使用をお勧めします。
  • AVIFは通常、エンコードに50％長い時間がかかりますが、WebPと比較して20％小さく圧縮されます。これは、画像が最初にリクエストされたときは通常遅くなりますが、キャッシュされた後続のリクエストは高速になることを意味します。
  • Next.jsの前にプロキシ/CDNを自己ホストする場合、プロキシを設定してAcceptヘッダーを転送する必要があります。

キャッシュ動作

以下は、デフォルトのローダーのキャッシュアルゴリズムを説明します。他のすべてのローダーについては、クラウドプロバイダーのドキュメントを参照してください。

画像はリクエスト時に動的に最適化され、<distDir>/cache/imagesディレクトリに保存されます。最適化された画像ファイルは、有効期限に達するまで後続のリクエストで提供されます。キャッシュされているが期限切れのファイルと一致するリクエストがあった場合、期限切れの画像がすぐに古いまま提供されます。その後、画像がバックグラウンドで再最適化され（再検証とも呼ばれます）、新しい有効期限で再度キャッシュされます。

画像のキャッシュステータスは、x-nextjs-cache（Vercelにデプロイされている場合はx-vercel-cache）レスポンスヘッダーの値を読むことで判断できます。可能な値は以下の通りです：

  • MISS - パスがキャッシュにない（最初の訪問時に最大1回発生）
  • STALE - パスはキャッシュにあるが再検証時間を超えているため、バックグラウンドで更新される
  • HIT - パスはキャッシュにあり、再検証時間を超えていない

有効期限（または最大経過時間）は、minimumCacheTTL設定またはアップストリーム画像のCache-Controlヘッダーのうち、大きい方によって定義されます。具体的には、Cache-Controlヘッダーのmax-age値が使用されます。s-maxageとmax-ageの両方が見つかった場合、s-maxageが優先されます。max-ageは、CDNやブラウザを含む下流のクライアントにも引き渡されます。

  • アップストリーム画像にCache-Controlヘッダーがない、または値が非常に低い場合、minimumCacheTTLを設定してキャッシュ期間を延長できます。
  • deviceSizesとimageSizesを設定して、生成される画像の総数を削減できます。
  • フォーマットを設定して、単一の画像フォーマットに有利に複数のフォーマットを無効にできます。

最小キャッシュTTL

キャッシュされた最適化画像のTime to Live（TTL）を秒単位で設定できます。多くの場合、ファイルの内容をハッシュ化し、Cache-Controlヘッダーをimmutableに設定して画像を永久にキャッシュする静的画像インポートを使用する方が良いでしょう。

next.config.js
module.exports = {
  images: {
    minimumCacheTTL: 60,
  },
}

最適化画像の有効期限（または最大経過時間）は、minimumCacheTTLまたはアップストリーム画像のCache-Controlヘッダーのうち、大きい方によって定義されます。

画像ごとにキャッシュ動作を変更する必要がある場合、headersを設定してアップストリーム画像（/_next/imageではなく、/some-asset.jpgなど）のCache-Controlヘッダーを設定できます。

現時点でキャッシュを無効にするメカニズムはないため、minimumCacheTTLを低く保つのが最適です。そうでない場合、srcプロパティを手動で変更するか、<distDir>/cache/imagesを削除する必要があります。

静的インポートの無効化

デフォルトの動作では、import icon from './icon.png'のような静的ファイルをインポートし、それをsrcプロパティに渡すことができます。

場合によっては、他のプラグインがインポートの動作を異なるものとして期待する場合、この機能を無効にしたいことがあります。

next.config.jsで静的画像インポートを無効にできます：

next.config.js
module.exports = {
  images: {
    disableStaticImages: true,
  },
}

SVGを危険に許可

デフォルトのローダーがSVG画像を最適化しない理由がいくつかあります。まず、SVGはベクターフォーマットであり、ロスレスでリサイズできます。次に、SVGはHTML/CSSと同様の多くの機能を持ち、適切なコンテンツセキュリティポリシー（CSP）ヘッダーなしでは脆弱性につながる可能性があります。

したがって、srcプロパティがSVGであることがわかっている場合は、unoptimizedプロパティを使用することをお勧めします。これはsrcが".svg"で終わる場合に自動的に行われます。

ただし、デフォルトの画像最適化APIでSVG画像を提供する必要がある場合は、next.config.jsでdangerouslyAllowSVGを設定できます：

next.config.js
module.exports = {
  images: {
    dangerouslyAllowSVG: true,
    contentDispositionType: 'attachment',
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
  },
}

さらに、ブラウザに画像をダウンロードさせるためにcontentDispositionTypeを設定し、画像に埋め込まれたスクリプトの実行を防ぐためにcontentSecurityPolicyを設定することを強くお勧めします。

contentDispositionType

デフォルトのローダーは、APIが任意のリモート画像を提供できるため、追加の保護としてContent-Dispositionヘッダーをattachmentに設定します。

デフォルト値はattachmentで、ブラウザに直接アクセスしたときに画像をダウンロードするよう強制します。これは、dangerouslyAllowSVGがtrueの場合に特に重要です。

オプションでinlineを設定して、ブラウザに直接アクセスしたときにダウンロードせずに画像をレンダリングすることを許可できます。

next.config.js
module.exports = {
  images: {
    contentDispositionType: 'inline',
  },
}

アニメーション画像

デフォルトのローダーは、アニメーション画像に対して自動的に画像最適化をバイパスし、画像をそのまま提供します。

アニメーションファイルの自動検出は最善の努力で行われ、GIF、APNG、WebPをサポートしています。特定のアニメーション画像の画像最適化を明示的にバイパスする場合は、unoptimizedプロップを使用してください。

バージョン履歴

バージョン変更点
v13.0.0next/imageがnext/legacy/imageに名称変更