<Image> コンポーネント

補足: Next.js 13より前のバージョンを使用している場合は、コンポーネント名が変更されているため、next/legacy/imageのドキュメントを参照してください。

このAPIリファレンスでは、Imageコンポーネントで利用可能なpropsと設定オプションの使用方法を理解するのに役立ちます。機能と使用方法については、Imageコンポーネントページを参照してください。

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="/profile.png"
      width={500}
      height={500}
      alt="著者の写真"
    />
  )
}

Props

Imageコンポーネントで利用可能なpropsの概要:

必須Props

Imageコンポーネントには以下のプロパティが必要です: src、width、height、alt。

import Image from 'next/image'

export default function Page() {
  return (
    <div>
      <Image
        src="/profile.png"
        width={500}
        height={500}
        alt="著者の写真"
      />
    </div>
  )
}

src

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

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

外部URLを使用する場合、next.config.jsのremotePatternsに追加する必要があります。

width

widthプロパティはピクセル単位の_レンダリング_幅を表し、画像の表示サイズに影響します。

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

height

heightプロパティはピクセル単位の_レンダリング_高さを表し、画像の表示サイズに影響します。

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

alt

altプロパティは、スクリーンリーダーや検索エンジン向けに画像を説明するために使用されます。また、画像が無効になっている場合や画像の読み込み中にエラーが発生した場合のフォールバックテキストでもあります。

ページの意味を変えずに画像を置き換えることができるテキストを含める必要があります。画像を補足するためのものではなく、画像の上下のキャプションですでに提供されている情報を繰り返すべきではありません。

画像が純粋に装飾的であるか、ユーザー向けではない場合、altプロパティは空の文字列(alt="")にする必要があります。

詳細を学ぶ

オプショナルProps

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

loader

画像URLを解決するためのカスタム関数。

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

• src
• width
• quality

カスタムローダーを使用する例:

'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="著者の写真"
      width={500}
      height={500}
    />
  )
}

あるいは、next.config.jsでloaderFile設定を使用して、プロパティを渡さずにアプリケーション内のすべてのnext/imageインスタンスを設定できます。

fill

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

親要素を埋めるように画像を拡大するブール値。widthとheightが不明な場合に便利です。

親要素にはposition: "relative"、position: "fixed"、またはposition: "absolute"スタイルを割り当てる_必要があります_。

デフォルトでは、img要素には自動的にposition: "absolute"スタイルが割り当てられます。

画像にスタイルが適用されていない場合、画像はコンテナに合わせて引き伸ばされます。アスペクト比を維持しながらコンテナに収まるようにするには、object-fit: "contain"を設定することをお勧めします。

あるいは、object-fit: "cover"を設定すると、画像はコンテナ全体を埋め、アスペクト比を維持しながら切り取られます。これを正しく表示するには、親要素にoverflow: "hidden"スタイルを割り当てる必要があります。

詳細については、以下も参照してください:

• position
• object-fit
• object-position

sizes

メディアクエリに似た文字列で、さまざまなブレークポイントで画像の幅がどのようになるかについての情報を提供します。sizesの値は、fillを使用する画像やレスポンシブサイズになるようにスタイル設定された画像のパフォーマンスに大きく影響します。

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

1. sizesの値は、ブラウザがnext/imageが自動生成したsrcsetからダウンロードする画像サイズを決定するために使用されます。ブラウザが選択する時点では、ページ上の画像のサイズがわからないため、ビューポートと同じサイズまたはそれ以上の画像を選択します。sizesプロパティを使用すると、画像が実際にはフルスクリーンより小さいことをブラウザに伝えることができます。fillプロパティを持つ画像にsizes値を指定しない場合、デフォルト値の100vw（フルスクリーン幅）が使用されます。
2. sizesプロパティは、自動生成されたsrcset値の動作を変更します。sizes値がない場合、固定サイズの画像（1x/2xなど）に適した小さなsrcsetが生成されます。sizesが定義されている場合、レスポンシブ画像（640w/750wなど）に適した大きなsrcsetが生成されます。sizesプロパティに50vwなどのビューポート幅の割合が含まれている場合、srcsetは必要以上に小さい値を含まないようにトリミングされます。

例えば、モバイルデバイスではフル幅、タブレットでは2列レイアウト、デスクトップ表示では3列レイアウトになるようにスタイル設定することがわかっている場合は、次のような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サイズがない場合、サーバーから選択される画像は必要な幅の3倍になります。ファイルサイズは幅の2乗に比例するため、sizesがないとユーザーは必要なサイズの9倍の大きさの画像をダウンロードすることになります。

srcsetとsizesについて詳しく学ぶ:

• web.dev
• mdn

quality

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

最適化された画像の品質で、1から100までの整数です。100が最高品質で、したがって最大ファイルサイズになります。デフォルトは75です。

priority

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

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

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

画像が折りたたみの上に表示されている場合にのみ使用してください。デフォルトはfalseです。

placeholder

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

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

blurの場合、blurDataURLプロパティがプレースホルダーとして使用されます。srcが静的インポートからのオブジェクトで、インポートされた画像が.jpg、.png、.webp、または.avifの場合、blurDataURLは自動的に入力されます（アニメーション画像と検出された場合を除く）。

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

data:image/...の場合、Data URLが画像の読み込み中のプレースホルダーとして使用されます。

emptyの場合、画像の読み込み中にプレースホルダーは表示されず、空白のスペースのみが表示されます。

デモを試す:

• blurプレースホルダーのデモ
• data URL placeholderプロパティを使用したシャイマー効果のデモ
• blurDataURLプロパティを使用したカラー効果のデモ

高度なProps

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

style

基になる画像要素にCSSスタイルを渡すことができます。

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

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

必要なwidthとheightのpropsがスタイルと相互作用する可能性があることに注意してください。スタイルを使用して画像の幅を変更する場合は、アスペクト比を維持するために高さをautoにスタイル設定するか、画像が歪んで表示されます。

onLoadingComplete

'use client'

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

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

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

onLoad

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

画像が読み込まれたときに呼び出されるコールバック関数。

loadイベントは、画像プレースホルダーが削除され、画像が完全にデコードされる前に発生する可能性があります。画像が完全に読み込まれるまで待ちたい場合は、代わりにonLoadingCompleteを使用してください。

onError

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

画像の読み込みに失敗した場合に呼び出されるコールバック関数。

loading

推奨: このプロパティは高度な使用例のみを対象としています。画像をeagerで読み込むように切り替えると、通常パフォーマンスが低下します。代わりに、画像を積極的にプリロードするpriorityプロパティを使用することをお勧めします。

loading = 'lazy' // {lazy} | {eager}

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

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

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

loading属性について詳しく学ぶ。

blurDataURL

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

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

デモを試す：

• デフォルトのblurDataURLプロップのデモ
• blurDataURLプロップを使った色効果のデモ

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

unoptimized

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

trueの場合、ソース画像は品質、サイズ、フォーマットを変更せずそのまま配信されます。デフォルトは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,
  },
}

その他のプロパティ

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

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

設定オプション

プロパティに加えて、next.config.jsでImageコンポーネントを設定できます。以下のオプションが利用可能です：

remotePatterns

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

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

知っておくと良いこと：上記の例では、next/imageのsrcプロパティがhttps://example.com/account123/で始まる必要があります。他のプロトコル、ホスト名、ポート、または一致しないパスは400 Bad Requestで応答されます。

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

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

知っておくと良いこと：上記の例では、next/imageのsrcプロパティがhttps://img1.example.comまたはhttps://me.avatar.example.com、または任意の数のサブドメインで始まる必要があります。他のプロトコルまたは一致しないホスト名は400 Bad Requestで応答されます。

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

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

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

domains

警告：悪意のあるユーザーからアプリケーションを保護するため、domainsではなく厳格なremotePatternsを設定することを推奨します。ドメインから配信されるすべてのコンテンツを所有している場合にのみdomainsを使用してください。

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

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

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

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

loaderFile

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

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

これはNext.jsアプリケーションのルートからの相対パスでファイルを指定する必要があります。ファイルは文字列を返すデフォルト関数をエクスポートする必要があります。例：

'use client'

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

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

例：

• カスタム画像ローダー設定

高度な設定

以下の設定は高度なユースケース向けで、通常は必要ありません。以下のプロパティを設定すると、将来の更新でNext.jsのデフォルトに対する変更を上書きします。

deviceSizes

ユーザーの予想されるデバイス幅がわかっている場合、next.config.jsのdeviceSizesプロパティを使用してデバイス幅のブレークポイントのリストを指定できます。これらの幅は、next/imageコンポーネントがsizesプロップを使用してユーザーのデバイスに適切な画像を配信する際に使用されます。

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

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

imageSizes

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

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

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

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

formats

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

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

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

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

以下の設定でAVIFサポートを有効にできます。

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

知っておくと良いこと：

• AVIFは一般的にエンコードに20%長くかかりますが、WebPと比べて20%小さく圧縮されます。つまり、画像が最初にリクエストされるときは通常遅くなりますが、キャッシュされた後続のリクエストは速くなります。
• Next.jsの前にProxy/CDNを自己ホストしている場合、Acceptヘッダーを転送するようにProxyを設定する必要があります。

キャッシュ動作

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

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

画像のキャッシュステータスは、x-nextjs-cacheレスポンスヘッダーの値を読むことで確認できます。可能な値は以下の通りです：

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

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

• 上流の画像にCache-Controlヘッダーがないか値が非常に低い場合、minimumCacheTTLを設定してキャッシュ期間を延長できます。
• 生成される可能性のある画像の総数を減らすために、deviceSizesとimageSizesを設定できます。
• 単一の画像フォーマットを優先して複数のフォーマットを無効にするために、フォーマットを設定できます。

minimumCacheTTL

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

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

最適化画像の有効期限（またはMax Age）は、minimumCacheTTLまたは上流の画像Cache-Controlヘッダーのいずれか大きい方によって定義されます。

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

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

disableStaticImages

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

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

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

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

dangerouslyAllowSVG

デフォルトのローダーはいくつかの理由でSVG画像を最適化しません。第一に、SVGはベクター形式であるため、ロスレスでサイズ変更できます。第二に、SVGにはHTML/CSSと同じ機能が多く含まれており、適切なコンテンツセキュリティポリシーがないと脆弱性につながる可能性があります。

デフォルトの画像最適化APIでSVG画像を配信する必要がある場合、next.config.js内でdangerouslyAllowSVGを設定できます：

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

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

アニメーション画像

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

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

レスポンシブ画像

デフォルトで生成されるsrcsetには、異なるデバイスのピクセル密度をサポートするために1xと2xの画像が含まれています。ただし、ビューポートに合わせて伸縮するレスポンシブ画像をレンダリングしたい場合があります。その場合、sizesとstyle（またはclassName）を設定する必要があります。

以下のいずれかの方法を使用してレスポンシブ画像をレンダリングできます。

静的インポートを使用したレスポンシブ画像

ソース画像が動的でない場合、静的インポートを使用してレスポンシブ画像を作成できます：

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

export default function Author() {
  return (
    <Image
      src={me}
      alt="著者の写真"
      sizes="100vw"
      style={{
        width: '100%',
        height: 'auto',
      }}
    />
  )
}

デモを試す：

• ビューポートに応答する画像のデモ

アスペクト比のあるレスポンシブ画像

ソース画像が動的またはリモートURLの場合、レスポンシブ画像の正しいアスペクト比を設定するためにwidthとheightも提供する必要があります：

import Image from 'next/image'

export default function Page({ photoUrl }) {
  return (
    <Image
      src={photoUrl}
      alt="著者の写真"
      sizes="100vw"
      style={{
        width: '100%',
        height: 'auto',
      }}
      width={500}
      height={300}
    />
  )
}

デモを試す：

• ビューポートに応答する画像のデモ

fillを使用したレスポンシブ画像

アスペクト比がわからない場合、fillプロップを設定し、親にposition: relativeを設定する必要があります。オプションで、目的の伸縮または切り抜き動作に応じてobject-fitスタイルを設定できます：

import Image from 'next/image'

export default function Page({ photoUrl }) {
  return (
    <div style={{ position: 'relative', width: '500px', height: '300px' }}>
      <Image
        src={photoUrl}
        alt="著者の写真"
        sizes="500px"
        fill
        style={{
          objectFit: 'contain',
        }}
      />
    </div>
  )
}

デモを試す：

• fillプロップのデモ

テーマ検出

ライトモードとダークモードで異なる画像を表示したい場合、2つの<Image>コンポーネントをラップし、CSSメディアクエリに基づいて正しい方を表示する新しいコンポーネントを作成できます。

.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} />
    </>
  )
}

豆知識: loading="lazy"のデフォルト動作により、正しい画像のみがロードされます。priorityやloading="eager"は使用できません。これらを使用すると両方の画像がロードされてしまいます。代わりにfetchPriority="high"を使用できます。

実際に試してみてください:

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

既知のブラウザバグ

このnext/imageコンポーネントはブラウザネイティブのレイジーローディングを使用しており、Safari 15.4より前の古いブラウザではeagerローディングにフォールバックする可能性があります。ブラーアッププレースホルダーを使用する場合、Safari 12より前の古いブラウザでは空のプレースホルダーにフォールバックします。width/heightにautoを使用したスタイルの場合、アスペクト比を保持しないSafari 15以前の古いブラウザでレイアウトシフトが発生する可能性があります。詳細はこのMDN動画をご覧ください。

• Safari 15 - 16.3ではロード中に灰色のボーダーが表示されます。Safari 16.4でこの問題は修正されました。可能な解決策:
  • CSS @supports (font: -apple-system-body) and (-webkit-appearance: none) { img[loading="lazy"] { clip-path: inset(0.6px) } }を使用
  • 画像がフォールドの上にある場合はpriorityを使用
• Firefox 67+ではロード中に白い背景が表示されます。可能な解決策:
  • AVIF formatsを有効化
  • placeholderを使用

バージョン履歴