Image (Legacy)
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>
要素への参照を受け取るように変更
必須Props
<Image />
コンポーネントには以下のプロパティが必須です。
src
次のいずれかである必要があります
- 静的にインポートされた画像ファイル
- パス文字列。これは、loaderプロップまたはloader設定に応じて、絶対外部URLまたは内部パスのいずれかになります。
デフォルトのローダーを使用する場合、ソース画像について次の点も考慮してください。
- 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 | 動作 | srcSet | sizes | ラッパーとサイザーがあるか |
---|---|---|---|---|
intrinsic (デフォルト) | コンテナの幅に合わせて画像サイズまで縮小 | 1x , 2x (画像サイズに基づく) | N/A | はい |
fixed | width とheight に正確にサイズ調整 | 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.js
のimages
セクションで定義されたデフォルトのローダーがオーバーライドされます。
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倍も大きい画像をダウンロードすることになります。
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
の場合、画像が読み込まれている間、プレースホルダーは表示されず、空白のスペースのみが表示されます。
試してみる
高度なProps
場合によっては、より高度な使用法が必要になることがあります。<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以下)が推奨されます。大きな画像をプレースホルダーとして含めると、アプリケーションのパフォーマンスが低下する可能性があります。
試してみる
画像に合うように単色のデータ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
を更新することで、すべての画像に割り当てることができます。
module.exports = {
images: {
unoptimized: true,
},
}
その他のProps
<Image />
コンポーネントのその他のプロパティは、以下の例外を除いて、基になるimg
要素に渡されます。
srcSet
。代わりにデバイスサイズを使用してください。ref
。代わりにonLoadingComplete
を使用してください。decoding
。常に"async"
です。
設定オプション
リモートパターン
悪意のあるユーザーからアプリケーションを保護するために、外部画像を使用するには設定が必要です。これにより、Next.js画像最適化APIから提供できるのは、あなたのアカウントからの外部画像のみであることが保証されます。これらの外部画像は、以下に示すように、next.config.js
ファイルのremotePatterns
プロパティで設定できます。
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
プロパティの例です。
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
の両方で使用でき、以下の構文を持ちます。
*
1つのパスセグメントまたはサブドメインに一致**
末尾の任意の数のパスセグメントまたは先頭のサブドメインに一致
**
構文はパターンの途中では機能しません。
注意点:
protocol
、port
、pathname
、またはsearch
を省略すると、ワイルドカード**
が暗黙的に適用されます。これは、悪意のあるアクターが意図しないURLを最適化する可能性があるため、推奨されません。
以下は、search
を使用したnext.config.js
ファイルのremotePatterns
プロパティの例です。
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
プロパティの例です。
module.exports = {
images: {
domains: ['assets.acme.com'],
},
}
ローダー設定
Next.jsに組み込まれている画像最適化APIを使用する代わりに、クラウドプロバイダを使用して画像を最適化したい場合、next.config.js
ファイルでloader
とpath
プレフィックスを設定できます。これにより、Image src
に相対URLを使用し、プロバイダの正しい絶対URLを自動的に生成できます。
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'
- Custom:
loader: 'custom'
next/legacy/image
コンポーネントでloader
プロップを実装することでカスタムクラウドプロバイダを使用できます。
別のプロバイダが必要な場合は、loader
プロップをnext/legacy/image
で使用できます。
画像は
output: 'export'
を使用してビルド時に最適化することはできません。オンデマンドでのみ最適化されます。output: 'export'
でnext/legacy/image
を使用するには、デフォルトとは異なるローダーを使用する必要があります。議論の詳細はこちら。
高度な設定
以下の設定は高度な使用例向けであり、通常は必要ありません。以下のプロパティを設定することを選択した場合、将来の更新でNext.jsのデフォルトに対する変更が上書きされます。
デバイスサイズ
ユーザーの想定されるデバイス幅がわかっている場合、next.config.js
のdeviceSizes
プロパティを使用して、デバイス幅のブレイクポイントリストを指定できます。これらの幅は、next/legacy/image
コンポーネントがlayout="responsive"
またはlayout="fill"
を使用する際に、ユーザーのデバイスに適切な画像が提供されるようにするために使用されます。
設定が提供されていない場合、以下のデフォルトが使用されます。
module.exports = {
images: {
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
},
}
画像サイズ
next.config.js
ファイルのimages.imageSizes
プロパティを使用して、画像幅のリストを指定できます。これらの幅は、デバイスサイズの配列と連結され、画像のsrcsetを生成するために使用されるサイズの完全な配列を形成します。
2つの異なるリストがある理由は、imageSizes
が、画面の全幅よりも小さい画像であることを示すsizes
プロップを提供する画像に対してのみ使用されるためです。したがって、imageSizes
内のサイズはすべて、deviceSizes
内の最小サイズよりも小さくなければなりません。
設定が提供されていない場合、以下のデフォルトが使用されます。
module.exports = {
images: {
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
},
}
許可されるフォーマット
デフォルトの画像最適化APIは、リクエストのAccept
ヘッダーを介してブラウザがサポートする画像フォーマットを自動的に検出し、最適な出力フォーマットを決定します。
Accept
ヘッダーが設定された複数のフォーマットと一致する場合、配列内の最初の一致が使用されます。したがって、配列の順序が重要です。一致がない場合(またはソース画像がアニメーションの場合)、画像最適化APIは元の画像のフォーマットにフォールバックします。
設定が提供されていない場合、以下のデフォルトが使用されます。
module.exports = {
images: {
formats: ['image/webp'],
},
}
AVIFサポートを有効にできます。これにより、ブラウザがAVIFをサポートしていない場合に、元のsrc画像のフォーマットにフォールバックします。
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-maxage
とmax-age
の両方が見つかった場合、s-maxage
が優先されます。max-age
は、CDNやブラウザを含む下流のすべてのクライアントにもパススルーされます。
- アップストリーム画像に
Cache-Control
ヘッダーが含まれていない場合、または値が非常に低い場合にキャッシュ期間を長くするために、minimumCacheTTL
を設定できます。 - 生成される画像の総数を減らすために、
deviceSizes
とimageSizes
を設定できます。 - 単一の画像形式を優先して複数の形式を無効にするには、形式を設定できます。
最小キャッシュTTL
キャッシュされた最適化画像のTime to Live (TTL) を秒単位で設定できます。多くの場合、静的画像インポートを使用する方が良いでしょう。これにより、ファイルコンテンツが自動的にハッシュ化され、Cache-Control
ヘッダーにimmutable
が設定されて画像が永続的にキャッシュされます。
設定が提供されていない場合、以下のデフォルトが使用されます。
module.exports = {
images: {
minimumCacheTTL: 60, // 1 minute
},
}
TTLを増やすことで、再検証の回数を減らし、潜在的にコストを削減できます。
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
内で静的画像のインポートを無効にできます。
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
を設定できます。
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
を設定すると、直接訪問した場合にブラウザが画像をダウンロードせずにレンダリングできるようになります。
module.exports = {
images: {
contentDispositionType: 'inline',
},
}
アニメーション画像
デフォルトのローダーは、アニメーション画像に対して自動的に画像最適化をバイパスし、画像をそのまま提供します。
アニメーションファイルの自動検出はベストエフォートであり、GIF、APNG、WebPをサポートしています。特定の画像に対して画像最適化を明示的にバイパスしたい場合は、unoptimizedプロパティを使用してください。
バージョン履歴
バージョン | 変更点 |
---|---|
v13.0.0 | next/image がnext/legacy/image に名称変更されました |
これは役に立ちましたか?