コンテンツへスキップ

Image (Legacy)

Next.js 13以降、next/imageコンポーネントはパフォーマンスと開発者体験の両方を向上させるために書き換えられました。後方互換性のあるアップグレードソリューションを提供するため、古いnext/imagenext/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>要素への参照を受け取るように変更

必須Props

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

src

次のいずれかである必要があります

デフォルトのローダーを使用する場合、ソース画像について次の点も考慮してください。

  • 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プロパティは必須です。

任意Props

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

layout

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

layout動作srcSetsizesラッパーとサイザーがあるか
intrinsic (デフォルト)コンテナの幅に合わせて画像サイズまで縮小1x, 2x (画像サイズに基づく)N/Aはい
fixedwidthheightに正確にサイズ調整1x, 2x (画像サイズに基づく)N/Aはい
responsiveコンテナの幅に合わせて拡大縮小640w, 750w, ... 2048w, 3840w (画像サイズデバイスサイズに基づく)100vwはい
fillコンテナを満たすようにX軸とY軸の両方に拡大640w, 750w, ... 2048w, 3840w (画像サイズデバイスサイズに基づく)100vwはい
  • intrinsicレイアウト(デフォルト)をデモ
    • intrinsicの場合、画像は小さいビューポートでは寸法を縮小しますが、大きいビューポートでは元の寸法を維持します。
  • fixedレイアウトをデモ
    • fixedの場合、画像寸法は、ネイティブのimg要素と同様に、ビューポートの変更によって変化しません(レスポンシブではありません)。
  • responsiveレイアウトをデモ
    • responsiveの場合、画像は小さいビューポートでは寸法を縮小し、大きいビューポートでは拡大します。
    • 親要素がスタイルシートでdisplay: blockを使用していることを確認してください。
  • fillレイアウトをデモ
    • fillの場合、親要素が相対位置であれば、画像は幅と高さの両方を親要素の寸法に合わせて引き伸ばします。
    • これは通常、objectFitプロパティと組み合わせて使用されます。
    • 親要素がスタイルシートでposition: relativeを持っていることを確認してください。
  • 背景画像をデモ

loader

URLを解決するために使用されるカスタム関数。Imageコンポーネントのプロップとしてローダーを設定すると、next.config.jsimagesセクションで定義されたデフォルトのローダーがオーバーライドされます。

loaderは、次のパラメータが与えられた場合に、画像用のURL文字列を返す関数です。

カスタムローダーを使用する例を以下に示します。

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倍も大きい画像をダウンロードすることになります。

srcsetsizesについてさらに学ぶ

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の場合、画像が読み込まれている間、プレースホルダーは表示されず、空白のスペースのみが表示されます。

試してみる

高度なProps

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

style

下層の画像要素にCSSスタイルを渡すことができます。

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

また、必須のwidthheightプロップがスタイリングと相互作用する可能性があることも覚えておいてください。画像の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以下)が推奨されます。大きな画像をプレースホルダーとして含めると、アプリケーションのパフォーマンスが低下する可能性があります。

試してみる

画像に合うように単色のデータURLを生成することもできます。

lazyBoundary

ビューポートと画像の交差を検出し、遅延読み込みをトリガーするために使用される、境界ボックスとして機能する文字列(marginプロパティと同様の構文)。デフォルトは"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,
  },
}

その他のProps

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

設定オプション

リモートパターン

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

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

注意点:上記の例では、next/legacy/imagesrcプロパティが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/imagesrcプロパティがhttps://img1.example.comまたはhttps://me.avatar.example.com、または任意の数のサブドメインで始まる必要があります。ポートやクエリ文字列を含めることはできません。他のプロトコルまたは一致しないホスト名は400 Bad Requestとして応答されます。

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

  • * 1つのパスセグメントまたはサブドメインに一致
  • ** 末尾の任意の数のパスセグメントまたは先頭のサブドメインに一致

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

注意点: protocolportpathname、または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/imagesrcプロパティが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ファイルでloaderpathプレフィックスを設定できます。これにより、Image srcに相対URLを使用し、プロバイダの正しい絶対URLを自動的に生成できます。

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

組み込みローダー

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

  • デフォルト: next devnext start、またはカスタムサーバーで自動的に機能します。
  • Vercel: Vercelにデプロイすると自動的に機能します。設定は不要です。詳細はこちら
  • Imgix: loader: 'imgix'
  • Cloudinary: loader: 'cloudinary'
  • Akamai: loader: 'akamai'
  • Custom: loader: 'custom' next/legacy/imageコンポーネントでloaderプロップを実装することでカスタムクラウドプロバイダを使用できます。

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

画像はoutput: 'export'を使用してビルド時に最適化することはできません。オンデマンドでのみ最適化されます。output: 'export'next/legacy/imageを使用するには、デフォルトとは異なるローダーを使用する必要があります。議論の詳細はこちら。

高度な設定

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

デバイスサイズ

ユーザーの想定されるデバイス幅がわかっている場合、next.config.jsdeviceSizesプロパティを使用して、デバイス幅のブレイクポイントリストを指定できます。これらの幅は、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をサポートしていない場合に、元のsrc画像のフォーマットにフォールバックします。

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

知っておくべきこと:

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

キャッシュ動作

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

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

画像のキャッシュステータスは、x-nextjs-cache(Vercelにデプロイされている場合はx-vercel-cache)応答ヘッダーの値を読み取ることで判断できます。指定可能な値は次のとおりです。

  • MISS - パスがキャッシュに存在しない(最初のアクセス時に最大1回発生)
  • STALE - パスはキャッシュに存在するが、再検証時間を超過しているため、バックグラウンドで更新される
  • HIT - パスはキャッシュに存在し、再検証時間を超過していない

有効期限(または最大寿命)は、minimumCacheTTL設定とアップストリームイメージのCache-Controlヘッダーのうち、大きい方によって定義されます。具体的には、Cache-Controlヘッダーのmax-age値が使用されます。s-maxagemax-ageの両方が見つかった場合、s-maxageが優先されます。max-ageは、CDNやブラウザを含む下流のすべてのクライアントにもパススルーされます。

  • アップストリーム画像にCache-Controlヘッダーが含まれていない場合、または値が非常に低い場合にキャッシュ期間を長くするために、minimumCacheTTLを設定できます。
  • 生成される画像の総数を減らすために、deviceSizesimageSizesを設定できます。
  • 単一の画像形式を優先して複数の形式を無効にするには、形式を設定できます。

最小キャッシュTTL

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

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

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

TTLを増やすことで、再検証の回数を減らし、潜在的にコストを削減できます。

next.config.js
module.exports = {
  images: {
    minimumCacheTTL: 2678400, // 31 days
  },
}

最適化された画像の有効期限(または最大寿命)は、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と同じ機能を多く持ち、適切なContent Security Policy (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/imagenext/legacy/imageに名称変更されました