<Image>

この API reference は、propsとoptions の設定を Image Component でどのように利用するか理解するのに役立ちます。機能や使用法については、Image Componentのページを参照してください。

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="/profile.png"
      width={500}
      height={500}
      alt="Picture of the author"
    />
  )
}

Props

ここに Image Component で利用可能な props の概要があります：

Required Props

Image Component は以下のプロパティが必須です：src、width、height、および alt。

import Image from 'next/image'

export default function Page() {
  return (
    <div>
      <Image
        src="/profile.png"
        width={500}
        height={500}
        alt="Picture of the author"
      />
    </div>
  )
}

src

次のいずれかでなければなりません：

• 静的にインポートされた image ファイル
• path string。これは、絶対的な外部の URL、または loader プロパティによっては、内部の path になります。

外部の URL を使用する際は、それを next.config.js の remotePatterns に追加しなければなりません。

width

widthプロパティは レンダリングされた width をピクセル単位で表し、それが image の表示サイズに影響を与えます。

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

height

height プロパティは、レンダリングされた height をピクセル単位で表し、そのため image の表示サイズに影響を与えます。

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

alt

alt プロパティは、スクリーンリーダーや検索エンジンで image を説明するために使用されます。また、画像が無効化された場合や、image の loading 中に error が発生した際の fallback テキストでもあります。

ページの意味を変えずに image を replace できるようなテキストを含んでいる必要があります。これは image を補完するものではなく、 image の上や下のキャプションで既に提供されている情報を繰り返すべきではありません。

image が純粋に装飾的 である、またはユーザーを対象としていない 場合、altプロパティは empty string(alt="")であるべきです。

Optional Props

<Image />の component は、必須属性以外にも多数の追加属性を受け入れます。このセクションでは、Image component の最も一般的に使用される属性について説明します。 より稀に使用される属性の詳細については、高度な Props セクションを参照してください。

loader

image URL を解決するために使用されるカスタム関数。

loader は、以下のパラメータを与えると URL string を返す image の関数です：

• src
• width
• quality

ここにカスタムの loader を使用する例があります：

"use client";

import Image from "next/image";

const imageLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`;
};

export default function Page() {
  return (
    <Image
      loader={imageLoader}
      src="me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  );
}

Good to know: loaderのような、関数を受け入れる props を使用するには、提供された関数をシリアライズするために Client Components を使用する必要があります。

あるいは、props を渡さずに、アプリケーション内の next/image のすべてのインスタンスを設定するために、 loaderFile コンフィギュレーションを next.config.js で使用することもできます。

fill

fill={true} // {true} | {false}

width と height が不明な場合に便利な、親要素を image で満たすための boolean です。

親要素は、position: "relative"、position: "fixed"、またはposition: "absolute"を必ず割り当てる必要があります style。

default では、img 要素は自動的に position: "absolute" style が割り当てられます。

もし何も styles が image に適用されていない場合、その image は container に合わせて伸び縮みします。レターボックス形式で container に収まるようにした上でアスペクト比を保つ image には object-fit: "contain" を設定することをお勧めします。

それ以外に、object-fit: "cover"は image が container 全体を埋め尽くし、アスペクト比を保つためにクロップされる原因となります。これが正しく見えるためには、overflow: "hidden" style が親要素に割り当てられるべきです。

詳細については、次も参照してください：

• position
• object-fit
• object-position

sizes

string というのは、メディアの query と同様に、異なるブレークポイントで image がどれくらいの幅になるかについての情報を提供するものです。sizes の value は、fill を使用するか、responsive size にスタイル設定されている画像のパフォーマンスに大きな影響を与えます。

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

• まず、sizes の value は、ブラウザが next/image から自動生成された srcset から size がどの image をダウンロードするかを決定するために使用されます。ブラウザが選択するとき、まだページ上の image の size を知らないため、viewport と同じ size またはそれ以上の image を選択します。sizes プロパティを使用すると、ブラウザに image が実際にはフルスクリーンより小さいことを伝えることができます。fill プロパティを持つ image で sizes の value を指定しない場合、default value は 100vw(フルスクリーンの width)が使用されます。
• その次に、sizes プロパティは自動生成される srcset の value の動作を変更します。もし sizes の value がなければ、固定サイズの image(1x/2x/など)に適した小さい srcset が生成されます。sizes が定義されていれば、レスポンシブ image(640w/750w/など)に適した大きな srcset が生成されます。もし sizes プロパティが 50vw のような viewport の幅のパーセンテージを表すサイズを含んでいる場合、その srcset は必要以上に小さい value を含まないように調整されます。

例えば、あなたが自分のスタイルが image がモバイルデバイスで全幅になり、タブレットでは 2 列の layout になり、デスクトップディスプレイでは 3 列の layout になることを知っているなら、次のような sizes プロパティを含めるべきです。

import Image from "next/image";

export default function Page() {
  return (
    <div className="grid-element">
      <Image
        fill
        src="/example.png"
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
      />
    </div>
  );
}

この例の sizes はパフォーマンス指標に大きな影響を与える可能性があります。33vw の sizes がなければ、 server から選択された image は必要な幅の 3 倍になります。ファイルの size は width の二乗に比例するため、sizes がなければ、ユーザーは必要なものの 9 倍も大きい image をダウンロードすることになります。

srcset と sizes についてもっと学びましょう：

• web.dev
• mdn

quality

quality={75} // {number 1-100}

最適化された image の quality は、1 から 100 の間の整数で、100 は最高の quality であり、その結果ファイルの size が最も大きくなります。default は 75 です。

priority

priority={false} // {false} | {true}

true の場合、image は高 priority と見なされ、preload が行われます。 Lazy loading は、priority を使用している画像では自動的に無効になります。

Largest Contentful Paint (LCP) 要素として検出されたすべての image に priority プロパティを使用するべきです。異なる画像が異なる viewport sizes で LCP 要素になる可能性があるため、複数の priority 画像を持つことが適切かもしれません。

image が折り目より上に表示される場合のみ使用すべきです。default では false となります。

placeholder

placeholder = "empty"; // "empty" | "blur" | "data:image/..."

image が読み込み中に使用するプレースホルダ。可能な values は、blur、empty、または data:image/... です。default は empty です。

blur の場合、blurDataURL プロパティが placeholder として使用されます。src がstatic import からの object で、インポートされた image が.jpg、.png、.webp、または.avif である場合、blurDataURL は自動的に充当されますが、 image がアニメ化されていると検出された場合を除きます。

dynamic 画像には、blurDataURL プロパティを提供する必要があります。Plaiceholder のようなソリューションは、base64 生成を支援することができます。

data:image/... があるとき、Data URL は、image が loading している間、placeholder として使用されます。

empty の場合、 image が loading している間に placeholder は存在せず、 empty なスペースだけが存在します。

試してみてください：

• blur placeholder のデモ
• データ URL placeholder prop を使用したシマーエフェクトのデモ
• blurDataURLプロパティでの色の効果のデモ

Advanced Props

一部の場合、より高度な使用が必要かもしれません。 <Image /> component は、以下の高度なプロパティをオプションで受け付けます。

style

基本的な image 要素に CSS styles を適用させることを可能にします。

const imageStyle = {
  borderRadius: '50%',
  border: '1px solid #fff',
}

export default function ProfileImage() {
  return <Image src="..." style={imageStyle} />
}

width と height props があなたのスタイリングに影響を与える可能性があることを覚えておいてください。画像の width をスタイリングで変更する場合、intrinsic なアスペクト比を保つために height もautoに style するべきで、さもなければあなたの image は歪んでしまいます。

onLoadingComplete

'use client'

<Image onLoadingComplete={(img) => console.log(img.naturalWidth)} />

警告: Next.js 14 以降では、onLoad を推奨するため、非推奨となりました。

image が完全に読み込まれ、placeholder が削除されたときに呼び出されるコールバック関数。

コールバック関数は、基礎となる<img>要素への参照を 1 つの引数として呼び出されます。

Good to know: onLoadingCompleteのような props を使うことで、関数を受け取ることができますが、提供された関数をシリアライズするには Client Components の使用が必要です。

onLoad

<Image onLoad={(e) => console.log(e.target.naturalWidth)} />

image が完全に読み込まれ、placeholder が削除されたときに呼び出されるコールバック関数。

コールバック関数は、基礎となる <img> 要素を参照する target を持つ Event を 1 つの引数として呼び出されます。

Good to know: 関数を受け入れるような props (onLoadなど)を使用する際には、提供された関数をシリアライズするために Client Components を使用する必要があります。

onError

<Image onError={(e) => console.error(e.target.id)} />

image のロードに失敗した場合に呼び出されるコールバック関数。

Good to know: 関数を受け入れる onError のような props を使用するには、提供された関数をシリアル化するために Client Components を使用する必要があります。

loading

推奨事項：このプロパティは、高度な使用状況のみを想定しています。 image を eager に切り替えると、通常はパフォーマンスが低下します。代わりに、priority プロパティを使用することをお勧めします。これにより、 image が積極的に preload されます。

loading = "lazy"; // {lazy} | {eager}

image の loading 動作。default は lazy 。

lazyの場合、 image の loading を viewport から計算された距離に達するまで延期します。

eagerのとき、image を直ちに読み込んでください。

loading属性 についてもっと学びましょう。

blurDataURL

src placeholder image が正常に読み込まれる前の placeholder image として使用するためのデータ URL 。これは、 placeholder="blur" と組み合わせて使用した場合にのみ効果を発揮します。

Base64 エンコードされた image でなければなりません。拡大されてぼやけるため、非常に小さい image (10px 以下)が推奨されます。プレースホルダーとして大きな画像を含めると、アプリケーションのパフォーマンスに悪影響を及ぼす可能性があります。

試してみてください：

• blurDataURL プロパティの default のデモ
• blurDataURL プロパティの色効果のデモ

また、image にマッチする固定色の Data URL を生成 することもできます。

unoptimized

unoptimized = {false} // {false} | {true}

true の場合、 source image は quality 、 size 、または形式を変更する代わりに、そのまま提供されます。default は false です。

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 /> component の他のプロパティは、以下の例外を除き、基礎となる img 要素に渡されます:

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

Configuration Options

props に加えて、next.config.jsで Image Component を設定することができます。以下の options が利用可能です：

remotePatterns

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

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

Good to know: 上記の例では、next/imageの src プロパティが https://example.com/account123/から start しなければならないことが保証されます。それ以外のプロトコル、 hostname 、 port 、または一致しない path であれば、400 Bad Request で応答します。

以下は、next.config.jsファイル内のremotePatternsプロパティの別の例です:

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

Good to know: 上記の例では、next/image の src プロパティは、https://img1.example.com または https://me.avatar.example.com、または任意の数の number サブドメインから start しなければなりません。他のプロトコルや、 port 、または一致しない hostname を使用すると、400 Bad Request の応答が返されます。

ワイルドカードパターンは、pathname と hostname の両方に使用でき、次の syntax を持ちます：

• *は、単一の path セグメントまたはサブドメインに一致します。
• ** は、最後の number の path セグメントまたは最初のサブドメインを一致させます。

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

Good to know： protocol、port、または pathname を省略すると、ワイルドカード ** が暗黙的に適用されます。これは推奨されません。なぜなら、悪意のある人々が意図しない URL を最適化する可能性があるからです。

domains

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

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

しかし、 domains 設定はワイルドカードパターンマッチングをサポートしておらず、port や pathname、またはプロトコルの制限もできません。

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

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

loaderFile

Next.js の組み込み Image Optimization API の代わりにクラウドプロバイダを使って画像を最適化したい場合は、次のようにnext.config.jsのloaderFileを設定できます：

module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './my/image/loader.js',
  },
}

これは、あなたの Next.js アプリケーションの root に関連するファイルを指す必要があります。そのファイルは、たとえば以下のように、string を返す default 関数を export しなければなりません:

"use client";

export default function myImageLoader({ src, width, quality }) {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`;
}

あるいは、loader prop を使用して、next/image の各インスタンスを設定することもできます。

Examples:

• カスタム Image Loader コンフィギュレーション

Good to know: image loader ファイルをカスタマイズすると、機能を受け入れる必要があります。これには、提供された関数をシリアル化するために Client Components の使用が必要です。

Advanced

次の設定は高度な使用ケース用で、通常は必要ありません。以下のプロパティを設定することを選択した場合、将来のアップデートにおける Next.js の default への変更を上書きします。

deviceSizes

あなたがユーザーの予想されるデバイスの幅を知っている場合、next.config.js の deviceSizes プロパティを使用してデバイスの width ブレークポイントのリストを指定できます。これらの幅は、next/image component がsizes プロパティを使用してユーザーのデバイスに対して正しい image が提供されることを確認するために使用されます。

設定が提供されていない場合、以下の default が使用されます。

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

imageSizes

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

2 つの別々のリストが存在する理由は、sizes プロップを提供する画像に対してのみ imageSizes が使用されることを示しているためであり、これは image が画面の全 width よりも小さいことを意味します。 したがって、imageSizes の sizes は、全て deviceSizes の最小の size よりも小さくなければなりません。

設定が提供されていない場合、以下の default が使用されます。

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

formats

default の Image Optimization API は、Request のAccept header を介してブラウザが対応している image formats 形式を自動的に検出します。

Accept の head が設定された複数の formats と一致する場合、配列の最初の一致が使用されます。したがって、配列の順序は重要です。一致がない場合(または、 source image がアニメーションの場合)、 Image Optimization API は、元の画像のフォーマットに fallback します。

設定が提供されていない場合、以下の default が使用されます。

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

次の設定で AVIF サポートを有効にすることができます。

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

Good to know:

• AVIF は通常、エンコードに 20%長い時間がかかりますが、WebP と比べて 20%小さく圧縮されます。これは、image が初めて Request されたときは通常遅いが、キャッシュされた後続の Request は速くなることを意味します。
• あなたがプロキシ／CDN を前面に自身でホストする場合、Next.js の場合、プロキシをAccept header を転送するように設定する必要があります。

Caching Behavior

次に、default の loader に対するキャッシングの algorithm について説明します。他のすべてのローダについては、各クラウドプロバイダーのドキュメンテーションを参照してください。

画像は date に基づいて動的に最適化され、<distDir>/cache/images ディレクトリに保存されます。最適化された image ファイルは、有効期限が来るまで次の request に対して提供されます。キャッシュされているが期限切れのファイルと一致する request が行われた場合、期限切れの image はすぐに stale として提供されます。その後、image は再度バックグラウンドで最適化され(再検証とも呼ばれます)新しい有効期限で cache に保存されます。

image の cache 状態は、x-nextjs-cache の response header を読むことによって判断できます。可能な value は次の通りです：

• MISS- path は cache 内にありません(最初の訪問時に最大一度発生します)
• STALE - path は cache 内に存在しますが、revalidate の時間を超過したため、バックグラウンドで更新されます
• HIT - path は cache 内にあり、revalidate の時間を超えていません

有効期限(またはむしろ Max Age)は、 minimumCacheTTL 設定または上流の image Cache-Control header のうち、大きい方で定義されます。具体的には、Cache-Control header の max-age value が使用されます。 s-maxageと max-ageの両方が見つかった場合、s-maxageが優先されます。 max-ageは、CDN やブラウザを含む任意の下流 Client にも引き続き渡されます。

• あなたは、上流の image にCache-Control header が含まれていない、または value が非常に低い場合に cache の期間を延長するために、minimumCacheTTL を設定することができます。
• deviceSizes と imageSizes を設定して、生成される可能性のある images の総 数 を減らすことができます。
• formats を設定して、複数の formats を無効にし、一つの image フォーマットを優先することができます。

minimumCacheTTL

キャッシュされた最適化された画像の Live(TTL) を秒単位で設定することができます。多くの場合、ファイル内容を自動的にハッシュ化し、 Cache-Control の immutable という header で image を永遠に cache するStatic Image Importを使用する方が良いでしょう。

module.exports = {
  images: {
    minimumCacheTTL: 60,
  },
}

最適化された image の有効期限(正確には Max Age)は、minimumCacheTTL または上流の image のCache-Control header のうち、大きい方によって定義されます。

image ごとにキャッシングの挙動を変更する必要がある場合、headers を設定して、上流の image(例えば/some-asset.jpg、/_next/image自体ではなく)に Cache-Control header を設定することができます。

現時点では、 cache を無効にするメカニズムは存在しないので、minimumCacheTTL は低く保つのが最善です。そうでなければ、src prop を手動で変更するか、 delete <distDir>/cache/imagesの操作が必要になるかもしれません。

disableStaticImages

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

一部のケースでは、他のプラグインが import の動作を異なるものとして期待している場合、この機能を無効にすることを希望するかもしれません。

あなたは next.config.js 内の静的な image インポートを無効にすることができます:

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

dangerouslyAllowSVG

default ローダー は、いくつかの理由から SVG images を最適化しません。まず、SVG はベクターフォーマットであるため、無劣化でリサイズすることができます。次に、SVG は HTML/CSS と多くの同じ機能を持っており、適切な Content Security Policy (CSP) headers がなければ脆弱性につながる可能性があります。

したがって、src prop が SVG であることがわかっている場合、unoptimized prop の使用をお勧めします。これは、src が ".svg" で終わると自動的に起こります。

ただし、default Image Optimization API を使用して SVG 画像を提供する必要がある場合は、next.config.js内で dangerouslyAllowSVG を設定できます：

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

また、ブラウザが image のダウンロードを強制するように contentDispositionType を設定することを強く推奨します。さらに、image に埋め込まれた scripts の実行を防ぐために contentSecurityPolicy を設定することも推奨します。

Animated Images

default の loader は自動的にアニメーション画像の Image Optimization をバイパスし、image をそのまま配信します。

アニメーションファイルの自動検出は最善を尽くし、GIF、APNG、WebP をサポートしています。特定のアニメーションの image で Image Optimization を明示的にバイパスしたい場合は、unoptimized プロップを使用してください。

Responsive Images

default で生成された srcset は、異なるデバイスピクセル比をサポートするために、1x および 2x の images を含みます。しかし、viewport に合わせて伸縮するレスポンシブイメージを rendering したい場合があるでしょう。その場合、sizes と同様に、style(またはclassName)を設定する必要があります。

以下の方法のいずれかを使用して、responsive image を render することができます。

静的な import を使用した Responsive image

もし source image が dynamic でない場合、静的に import して responsive image を作成することができます。

import Image from 'next/image'
import me from '../photos/me.jpg'

export default function Author() {
  return (
    <Image
      src={me}
      alt="Picture of the author"
      sizes="100vw"
      style={{
        width: '100%',
        height: 'auto',
      }}
    />
  )
}

試してみてください：

• responsive image のデモ

Responsive image のアスペクト比

もし source image が dynamic またはリモートの url である場合、responsive image の正しいアスペクト比を設定するために、widthとheightも提供する必要があります：

import Image from 'next/image'

export default function Page({ photoUrl }) {
  return (
    <Image
      src={photoUrl}
      alt="Picture of the author"
      sizes="100vw"
      style={{
        width: '100%',
        height: 'auto',
      }}
      width={500}
      height={300}
    />
  )
}

試してみてください：

• responsive image のデモ

Responsive image と fill

アスペクト比がわからない場合、fill プロパティを設定し、親に position: relative を設定する必要があります。オプションで、希望のストレッチ対クロップ動作に応じて、object-fit style を設定することもできます：

import Image from 'next/image'

export default function Page({ photoUrl }) {
  return (
    <div style={{ position: 'relative', width: '500px', height: '300px' }}>
      <Image
        src={photoUrl}
        alt="Picture of the author"
        sizes="500px"
        fill
        style={{
          objectFit: 'contain',
        }}
      />
    </div>
  )
}

試してみてください：

• fill プロパティのデモ

Theme Detection CSS

明るいモードと暗いモードで異なる image を表示したい場合、2 つの<Image> display をラップする新しい component を作成して、CSS メディア query に基づいて正しいものを表示することができます。

.imgDark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .imgLight {
    display: none;
  }
  .imgDark {
    display: unset;
  }
}

import styles from './theme-image.module.css'
import Image, { ImageProps } from 'next/image'

type Props = Omit<ImageProps, 'src' | 'priority' | 'loading'> & {
  srcLight: string
  srcDark: string
}

const ThemeImage = (props: Props) => {
  const { srcLight, srcDark, ...rest } = props

  return (
    <>
      <Image {...rest} src={srcLight} className={styles.imgLight} />
      <Image {...rest} src={srcDark} className={styles.imgDark} />
    </>
  )
}

import styles from './theme-image.module.css'
import Image from 'next/image'

const ThemeImage = (props) => {
  const { srcLight, srcDark, ...rest } = props

  return (
    <>
      <Image {...rest} src={srcLight} className={styles.imgLight} />
      <Image {...rest} src={srcDark} className={styles.imgDark} />
    </>
  )
}

Good to know: loading="lazy"の default の振る舞いは、正しい image のみが読み込まれることを保証します。 priorityやloading="eager"は使用できません。なぜなら、それらを使用すると両方の画像が読み込まれてしまうからです。代わりに、fetchPriority="high" を使用することができます。

試してみてください：

• ライト/ダークモード テーマ検出のデモ

getImageProps

より高度な使用ケースの場合、getImageProps()を呼び出して、基になる<img>要素に渡されるはずの props を取得し、代わりにそれらを別の component、style、canvas などに渡すことができます。

これはまた、 React のuseState()を呼び出すことを避けるため、パフォーマンスの向上につながる可能性がありますが、placeholder prop と一緒には使用できません。なぜなら、その placeholder は削除されないからです。

テーマ検出画像

ライトモードとダークモード用に異なる image を display させたい場合は、ユーザーの preferred color scheme に基づいて異なる image を display するために、<picture> 要素を使用することができます。

import { getImageProps } from 'next/image'

export default function Page() {
  const common = { alt: 'Theme Example', width: 800, height: 400 }
  const {
    props: { srcSet: dark },
  } = getImageProps({ ...common, src: '/dark.png' })
  const {
    props: { srcSet: light, ...rest },
  } = getImageProps({ ...common, src: '/light.png' })

  return (
    <picture>
      <source media="(prefers-color-scheme: dark)" srcSet={dark} />
      <source media="(prefers-color-scheme: light)" srcSet={light} />
      <img {...rest} />
    </picture>
  )
}

アートディレクション

もしモバイルとデスクトップで異なる image を表示したい場合、Art Direction とも呼ばれ、異なる src、width、height、quality の props を getImageProps() に提供することができます。

import { getImageProps } from 'next/image'

export default function Home() {
  const common = { alt: 'Art Direction Example', sizes: '100vw' }
  const {
    props: { srcSet: desktop },
  } = getImageProps({
    ...common,
    width: 1440,
    height: 875,
    quality: 80,
    src: '/desktop.jpg',
  })
  const {
    props: { srcSet: mobile, ...rest },
  } = getImageProps({
    ...common,
    width: 750,
    height: 1334,
    quality: 70,
    src: '/mobile.jpg',
  })

  return (
    <picture>
      <source media="(min-width: 1000px)" srcSet={desktop} />
      <source media="(min-width: 500px)" srcSet={mobile} />
      <img {...rest} style={{ width: '100%', height: 'auto' }} />
    </picture>
  )
}

背景 CSS

srcSetの string を image-set() の CSS 関数に変換して、背景の image を最適化することも可能です。

import { getImageProps } from 'next/image'

function getBackgroundImage(srcSet = '') {
  const imageSet = srcSet
    .split(', ')
    .map((str) => {
      const [url, dpi] = str.split(' ')
      return `url("${url}") ${dpi}`
    })
    .join(', ')
  return `image-set(${imageSet})`
}

export default function Home() {
  const {
    props: { srcSet },
  } = getImageProps({ alt: '', width: 128, height: 128, src: '/img.png' })
  const backgroundImage = getBackgroundImage(srcSet)
  const style = { height: '100vh', width: '100vw', backgroundImage }

  return (
    <main style={style}>
      <h1>Hello World</h1>
    </main>
  )
}

Known Browser Bugs

この next/image component はブラウザのネイティブ遅延読み込み を使用しており、Safari 15.4 より前の古いブラウザではイーガーロードに fallback する可能性があります。ブラーを上げるプレースホルダを使用すると、Safari 12 より前の古いブラウザでは空のプレースホルダに fallback します。width/height を auto に設定した styles を使用すると、アスペクト比を保存しない Safari 15 より前の古いブラウザでは Layout Shift を引き起こす可能性があります。詳細は、この MDN のビデオ を参照してください。

• Safari 15 - 16.3 は、 loading 中に灰色の枠を display します。 Safari 16.4 はこの問題を fixed しました。可能な解決策:
  • @supports (font: -apple-system-body) and (-webkit-appearance: none) { img[loading="lazy"] { clip-path: inset(0.6px) } }という CSS を使用してください。
• image が折りたたみ部分より上にある場合は、priority を使用してください。
• Firefox 67+ は、loading 中に白い背景を表示します。可能な解決策：
  • AVIF formats を有効にする
  • placeholder を使用してください。

Version History