next/imageコンポーネントは何をしますか?

Question

Accepted Answer

`next/image` は `` タグのNext.js最適化版です。手動で実装する必要があるイメージパフォーマンスのベストプラクティスのスタックを自動的に適用します。 ```tsx import Image from "next/image"; export default function Avatar() { return (

); } ``` ## 自動的に行うこと - **リサイズとモダンフォーマット** — 適切なサイズの画像を提供し、WebP/AVIFにその場で変換され、元のサイズより劇的に小さくなります。 - **レスポンシブ `srcset`** — 複数のサイズを生成し、各デバイスが適切なものをダウンロードします。 - **デフォルトで遅延読込** — オフスクリーン画像はスクロール時に近づいたときだけ読み込まれます (`priority` で上書き可能)。 - **レイアウトシフト (CLS) の防止** — 必須の `width`/`height` (または `fill`) は領域を予約し、画像読込時にページが跳びません。 - **ぼかしプレースホルダー** — `placeholder="blur"` は読込中に小さくぼかされたプレビューを表示します。 ## 未知のサイズの fill ```tsx

``` 画像が配置されたパレントを埋める場合は `fill` を使用します (固定幅/高さの代わりに) — ヒーロー/カバー画像に一般的です。 ## 外部画像は config が必要 ```js // next.config.js — allowlist remote hosts for security module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } }; ``` ## なぜ重要なのか画像は通常ページで最も重いアセットであり、Core Web Vitals (LCP、CLS) の不良の主な原因です。`next/image` はリサイズ、モダンフォーマット、レスポンシブ `srcset`、遅延読込、レイアウトシフト防止を自動化します — パフォーマンスの大きな課題を単一コンポーネントに変え、LCP 画像用の `priority` が覚えておく必要がある唯一のノブです。