<Image> (Legacy)

例

レガシー Image コンポーネント

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

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

比較

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

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

必須プロパティ

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

src

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

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

デフォルトの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プロパティはピクセル単位で*元の*幅を表すため、アスペクト比にのみ影響します。

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

height

heightプロパティは、layoutおよびsizesプロパティに応じて、ピクセル単位で*レンダリングされた*高さまたは*元の*高さのいずれかを表すことができます。

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

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

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

オプションのプロパティ

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

layout

ビューポートのサイズが変更されたときの画像のレイアウト動作。

`layout`	動作	`srcSet`	`sizes`	ラッパーとサイザーがある
`intrinsic`（デフォルト）	コンテナの幅に合わせて縮小し、画像サイズまで拡大します。	`1x`、`2x`（imageSizesに基づく）	N/A	はい
`fixed`	`width`と`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文字列を返す関数です。

src
width
quality

カスタム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="Picture of the author"
      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倍になります。ファイルサイズは幅の二乗に比例するため、sizesがない場合、ユーザーは必要以上に9倍大きい画像をダウンロードすることになります。

srcsetとsizesの詳細はこちら

web.dev
mdn

品質

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

優先度

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

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

画像がファーストビューに表示されている場合にのみ使用する必要があります。デフォルトはfalseです。

プレースホルダー

画像の読み込み中に使用するプレースホルダー。可能な値は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エンコードされた画像である必要があります。拡大およびぼかされるため、非常に小さな画像（10px以下）をお勧めします。大きな画像をプレースホルダーとして含めると、アプリケーションのパフォーマンスが損なわれる可能性があります。

試してみる

画像に合わせるために、単色のData URLを生成することもできます。

lazyBoundary

画像の表示領域との交差を検出し、遅延読み込みをトリガーするために使用される境界ボックスとして機能する文字列（marginプロパティに似た構文）。デフォルトは"200px"です。

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

詳しくはこちら

lazyRoot

スクロール可能な親要素を指すReactのRef。デフォルトはnull（ドキュメントの表示領域）です。

Refは、DOM要素または、基になるDOM要素にRefを転送する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の場合、ソース画像は、品質、サイズ、または形式を変更せずにそのまま提供されます。デフォルトはfalseです。

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

Next.js 12.3.0以降では、次の構成でnext.config.jsを更新することにより、このpropをすべての画像に割り当てることができます。

next.config.js

module.exports = {
  images: {
    unoptimized: true,
  },
}

その他のProps

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

srcSet。代わりにデバイスサイズを使用してください。
ref。代わりにonLoadingCompleteを使用してください。
decoding。常に"async"です。

構成オプション

リモートパターン

悪意のあるユーザーからアプリケーションを保護するために、外部画像を使用するには構成が必要です。これにより、アカウントからの外部画像のみが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で応答します。

以下は、hostnameでワイルドカードパターンを使用した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を最適化する可能性があるため、これは推奨されません。

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

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組み込みのImage Optimization APIを使用する代わりに、クラウドプロバイダーを使用して画像を最適化する場合は、next.config.jsファイルでloaderとpathプレフィックスを構成できます。これにより、Image srcに相対URLを使用し、プロバイダーの正しい絶対URLを自動的に生成できます。

next.config.js

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

組み込みローダー

次のImage Optimizationクラウドプロバイダーが含まれています。

デフォルト: 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 プロパティを使用して、画像の幅のリストを指定できます。これらの幅は、デバイスサイズの配列と連結され、画像 srcsetsを生成するために使用されるサイズの完全な配列を形成します。

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サポートを有効にし、WebPにフォールバックすることもできます。

next.config.js

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

知っておくと良いこと：AVIFは一般的にエンコードに50％長く時間がかかりますが、WebPと比較して20％小さく圧縮されます。これは、画像が最初にリクエストされたときは通常は遅く、キャッシュされた後続のリクエストが速くなることを意味します。

キャッシュの動作

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

画像はリクエストに応じて動的に最適化され、<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 を構成して、生成される可能性のある画像の合計数を減らすことができます。
formats を構成して、複数の形式を無効にして単一の画像形式を使用することもできます。

最小キャッシュ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.0`	`next/image`が`next/legacy/image`にリネームされました