まくろぐ

Next.js の Image コンポーネントで画像表示を最適化する (next/image)

更新:
作成:

Next.js が提供している Image コンポーネント (next/image) を使用すると、image 要素をそのまま配置するのに比べて次のような恩恵を受けられます。

  • アクセスしてきたクライアントに応じた画像最適化(WebP 化など)
  • 遅延ローディング(ビューポート内に画像が入ったときに初めてダウンロードする)

画像最適化に関しては、Next.js サーバー上でホスティングしているときしか動作しないといった制約がありますが、遅延ローディングがデフォルトで有効になるのは便利です。

次のサンプルコンポーネントでは、Image コンポーネントを使って /public/me.png ファイルを表示しています。 public ディレクトリ以下に配置したファイルは、ルートパス (/) からの相対パスで参照できます。

components/Avatar.tsx
import Image from 'next/image'

export const Avatar: React.FC = () => (
  <Image src="/me.png" alt="My avatar" width={64} height={64} />
)

widthheight を明示することは、CLS (Cumulative Layout Shift) を発生させないために重要です。 表示サイズがあらかじめ決まっていないと、画像ロード後にレイアウトがガクッとずれたりして UX が低下します。 Google によるサイト評価でも CLS スコアは重要視されています。

関連記事

まくろぐ
サイトマップまくへのメッセージ