Next.jsのImageコンポーネント：sizes、preload、外部画像
ホーム Next.jsのImageコンポーネントガイド
Next.jsのImage：sizes、preload、remotePatterns、LCP | We.Inc
Next.js 16でのnext/imageの仕組みを解説します。width、height、fill、sizesの計算ツール、priorityに代わるpreload、remotePatterns、qualities、srcsetの既定の幅まで。
next/imageからImageをインポートし、srcとaltに加えて、widthとheightの組み合わせかfillのどちらかを渡します。表示される幅が画面に応じて変わるときは必ずsizesの文字列を付けると、ブラウザーはより小さなファイルをダウンロードします。LCPとなるヒーロー画像にはpreloadを設定します（Next.js 16でpriorityに代わりました）。外部ホストはimages.remotePatternsで許可します。
速度を左右するプロパティ
width / height 画像のサイズが固定されている、または縦横比の領域を確保したいとき 親のボックスがサイズを決めるとき（カード、ヒーロー、カバー画像） ブラウザーは100vwとみなす 画像がレスポンシブ、またはfillを使っているとき すぐに読み込む必要がある画像にだけeagerを指定する images.qualitiesに列挙された値だけが配信される Next.jsでは、画像に関して陥りやすい失敗が2つあります。sizesのないfill画像のせいでスマートフォンがデスクトップ用のファイルをダウンロードしてしまうこと、そしてヒーロー画像が遅延読み込みを待ってしまうことです。このページでは各プロパティをわかりやすく説明し、レイアウトに合ったsizesの文字列を書き出す計算ツールを用意し、Next.jsが現在使っている設定の既定値を一覧にしています。
画像が置かれるレイアウトを選びます。全幅、2カラム、3枚のカードのグリッドなどです。 CSSで使っているブレークポイントを設定します。計算ツールが対応するsizesの値を書き出します。 スマートフォンの幅とピクセル密度を選ぶと、ブラウザーが既定のsrcsetのうちどの幅を取得する可能性が高いかがわかります。 完成したImage要素をコピーして、コンポーネントに貼り付けます。 静的インポート（import hero from './hero.jpg'）を使うと、width、height、blurDataURLが自動で埋まります。リポジトリ内にある画像にはこちらを優先しましょう。 fill画像には、position: relativeと実際の高さを持つ親を用意しましょう。そうしないと大きさがゼロに潰れてしまいます。 preloadを付けるのは、1つのビューポートにつき画像1枚だけにしましょう。複数の画像に付けると意味がなくなり、帯域を奪い合います。 remotePatternsは狭く保ちましょう。ドメイン全体を許可するのではなく、プロトコル、正確なホスト名、パスの接頭辞を指定します。 渡した画質がimages.qualitiesにない場合、Next.jsは許可された最も近い値で配信し、開発時には警告を出します。 よくある質問
priorityプロパティは非推奨ですか？
はい。Next.js 16から、ドキュメントではpriorityが非推奨とされ、代わりにpreloadが推奨されています。preloadはhead内にプリロード用のリンクを挿入します。ドキュメントには、ほとんどの場合はloading="eager"かfetchPriority="high"のほうが良い選択であり、preloadをそのどちらとも組み合わせるべきではないとも書かれています。
next/imageでホスト名が設定されていないと表示されるのはなぜですか？
外部画像は、next.configのimages.remotePatternsのいずれかの項目に一致する必要があります。プロトコル、ホスト名、そして/photos/**のようなパス名を持つオブジェクトを追加し、開発サーバーを再起動してください。どのパターンにも一致しないリクエストには、画像最適化の処理から400のレスポンスが返ります。
sizesプロパティは実際に何を変えるのですか？
CSSが読み込まれる前に、各ブレークポイントで画像がどれくらいの幅になるかをブラウザーに伝えます。sizesがあると、Next.jsは1xと2xだけでなく、幅に基づく完全なsrcset（640w、750wなど）も出力するので、スマートフォンははるかに小さなファイルを選べます。
fillを使う場合もwidthとheightは必要ですか？
いいえ。fillとwidth/heightはどちらか一方を使うものです。fillでは画像が位置指定された親いっぱいに広がり、切り抜き方はstyleまたはclassNameプロパティを通じてobject-fitで制御します。
最適化された画像はどれくらいキャッシュされますか？
minimumCacheTTLの既定値は14400秒、つまり4時間です。実際の最大有効期間は、この値と元画像が送るCache-Controlヘッダーのうち大きいほうです。静的にインポートした画像はファイル名にハッシュが付くため、長期間の不変キャッシュが適用されます。
このコンポーネントがある理由
素のimgタグは、どの端末にも同じファイルを1つ送ります。next/imageはリクエストに応じて元画像をリサイズし、ブラウザーが受け付ける最新の形式に変換し、既定で遅延読み込みを行い、画像が届くまでの間にレイアウトがずれないよう領域を確保します。 ただし、適切なファイルを選べるのは、画像がどれくらいの幅になるかを知っているときだけです。それを伝えるのがwidth、height、sizesの役目であり、実際の現場で起きる失敗のほとんどもここで生じます。 LCPを正しく扱う
Largest Contentful Paintは、多くの場合ヒーロー写真です。その写真を遅延読み込みにすると指標が遅れるので、preload、またはloading="eager"とfetchPriority="high"の組み合わせを指定し、ファーストビューより下の画像はすべて既定の遅延読み込みのままにしましょう。 それと合わせて、実態どおりのsizesの値を指定します。スマートフォンでは全幅、デスクトップではページの半分を占めるヒーロー画像なら、そう明記すべきです。そうしないと、大きな画面でも小さな画面でも不適切なファイルが届きます。 触ることになる設定
remotePatternsには、信頼する外部ホストを列挙します。qualitiesは画質の値の許可リストで、Next.js 16からは必須となり、ドキュメントでは既定値が75です。formatsを使うとWebPより先にAVIFを追加できますが、その代わり両方の版をキャッシュに保存することになります。 deviceSizesとimageSizesを合わせたものが、すべてのsrcsetにおける候補の幅になります。変更する必要はほとんどありませんが、既定値を知っておくと、ブラウザーが何をダウンロードしたかをネットワークパネルで読み解くのに役立ちます。 よく使うプロパティの一覧
next/imageのプロパティ（Next.js 16のリファレンス）
文字列または静的インポート publicフォルダー内のローカルパス、インポートしたファイル、またはremotePatternsで許可された外部URL 必須の代替テキスト。空文字列は装飾用の画像にだけ使う width, height 整数（px） 縦横比に使われる本来のサイズ。静的インポートやfillでは不要 widthとheightの代わりに、位置指定された親いっぱいに広げる srcsetの選択を決めるメディア条件とスロットの幅 1〜100の整数 出力の画質。既定値は75で、images.qualitiesの一覧の値に丸められる LCP画像のために、head内にプリロード用のリンクを追加する empty、blur、またはデータURL 読み込み中に表示するもの。静的インポートでない場合、blurにはblurDataURLが必要 リサイズや形式の変換をせず、元のファイルをそのまま配信する Next.js 16で非推奨。代わりにpreloadを使う 画像設定の既定値
next.configのimages設定とその既定値
deviceSizes 全幅の画像とfill画像の幅 imageSizes 追加の小さな幅。画像にsizesプロパティがあるときだけ使われる minimumCacheTTL 14400（4時間） この値と元のCache-Controlのうち大きいほうが採用される remotePatterns 外部ホストはすべて列挙する必要がある コピーして使える例
静的インポートしたヒーロー画像
インポートによって、Next.jsは実際の寸法とぼかしのプレースホルダーを得ます。preloadでhead内からダウンロードが始まります。
fillとsizesを使ったカードのグリッド
各カードはデスクトップではページの3分の1、タブレットでは半分、スマートフォンでは全幅になり、sizesの値はまさにそれを表しています。
外部画像ホスト用のnext.config.ts
1つのホストの/uploads/以下にあるHTTPSのファイルだけを許可します。画質の値は2つ許可しています。
全幅
デスクトップでは半分
2カラムのグリッド
3枚のカードのグリッド
4枚のカードのグリッド
sizes計算ツール
レイアウトとブレークポイントを選んでsizes属性を生成し、特定の画面が既定のsrcsetのうちどの幅をダウンロードしそうかを確認できます。
レイアウト
スマートフォンのブレークポイント（px）
タブレットのブレークポイント（px）
画面の幅：{n}px
ピクセル密度
{screen}pxでは、画像の枠は約{slot}pxの幅（{vw}vw）です。{dpr}xの密度では{need}デバイスピクセルが必要なので、ブラウザーはおそらく{pick}wの候補を取得します。
コピー
既定の候補の幅：{list}。より大きなファイルがすでにキャッシュされている場合など、ブラウザーが別の幅を選ぶこともあります。
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る