SEO: 自動画像最適化 | Next.js

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

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

しかし、これでは以下のような最適化を手動で行う必要があります:

Next.jsはこれらの最適化を組み込みで処理できるImageコンポーネントを提供しています。

next/imageはHTMLのimg要素を拡張したもので、モダンなWeb向けに進化しています。

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

このコンポーネントは、小さなビューポートを持つデバイスに大きな画像を送信することを防ぎ、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コンポーネントに置き換えます:

// 置換前
<img src="large-image.jpg" alt="Large Image" />
 
// 置換後
<Image src="/large-image.jpg" alt="Large Image" width={3048} height={2024} />

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

// 置換前
<img src="/vercel.svg" alt="Vercel Logo" />
 
// 置換後
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />

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

自動画像最適化