← Next.js コース
18. next/image — 画像の最適化
画像の表示には、img タグの代わりに next/image の Image コンポーネントを使います。src・alt に加えて width と height を指定すると、画像の自動圧縮、画面サイズに合わせた変換、画面に入ってからの遅延読み込みをすべて自動でやってくれます。
画像はページで一番重いデータになりがちで、表示速度への影響が大きい部分です。実務では「画像は全部 next/image」としておくだけで、手作業の圧縮や出し分けなしに表示が速くなります。
つまずきやすいのは width と height が必須なことです(レイアウトのガタつき防止のため)。また、外部サイトの画像 URL を使う場合は next.config 側でそのドメインの許可が必要、という点も覚えておいてください。
サンプルコード(フレームワーク環境が必要なため表示のみ)
import Image from "next/image";
export default function Profile() {
return (
<main>
{/* public/avatar.png を表示。圧縮・遅延読み込みは自動 */}
<Image
src="/avatar.png"
alt="プロフィール画像"
width={200}
height={200}
/>
</main>
);
}