チャプター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万枚でも、ビルド時間が増加することはありません。

画像はデフォルトで遅延ロードされます。ビューポート外にある画像によってページ速度が低下することはありません。画像は表示されたときにのみロードされます。

Cumulative Layout Shift (CLS) を避けるため、画像は常にレンダリングされます。

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

pages/index.js ファイルを開き、次のインポートを追加します。

ファイルの先頭に Image を next/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