チャプター24

画像の自動最適化

通常のHTMLを使用し、ヒーロー画像を次のように追加しました

<img src="large-image.jpg" alt="Large Image" />

しかし、これには次のような手動での最適化が必要です。

Next.js は、これらの最適化をすぐに利用できる Image コンポーネントを提供しています。

next/image は、HTML の img 要素を拡張し、モダンなウェブ向けに進化させたものです。

つまり、WebP のようなモダンな形式（ブラウザがサポートしている場合）での画像のサイズ変更、最適化、配信は、next/image を使用して自動的に行うことができます。

このコンポーネントは、小さいビューポートを持つデバイスに大きな画像を配信することを回避し、Next.js が将来の画像形式を採用し、それらをサポートするブラウザに配信できるようにします。

画像の自動最適化は、あらゆる画像ソースで機能します。画像が CMS のような外部データソースでホストされている場合でも、最適化できます。

ビルド時に画像を最適化する代わりに、Next.js はユーザーがリクエストしたときにオンデマンドで画像を最適化します。静的サイトジェネレーターや静的のみのソリューションとは異なり、10枚の画像でも1000万枚の画像でも、ビルド時間は増加しません。

画像はデフォルトで遅延読み込みされます。ビューポート外にある画像がページの速度を低下させることはありません。画像は表示範囲に入ると読み込まれます。

累積レイアウトシフト (CLS) を回避するために、画像は常にレンダリングされます。

ヒーロー画像を表示するために、next/image を使用してアプリを更新しましょう。height と width のプロップは、ソース画像と同じアスペクト比の、希望するレンダリングサイズである必要があります。

pages/index.js ファイルを開き、以下をインポートします。

ファイルの先頭で next/image から Image

import Image from 'next/image';

次に、ヒーローの img を Image コンポーネントに置き換えます。

// Before
<img src="large-image.jpg" alt="Large Image" />
 
// After
<Image src="/large-image.jpg" alt="Large Image" width={3048} height={2024} />

フッターにも画像があります。これも置き換えましょう。

// Before
<img src="/vercel.svg" alt="Vercel Logo" />
 
// After
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />

最後に、Chrome DevTools で別の Lighthouse レポートを実行し、結果を比較してください。

チャプターを完了しました。24