Next.jsの画像最適化：next/imageの使い方と注意点

Next.jsのnext/imageコンポーネントは、Webサイトのパフォーマンス向上を目的とした自動画像最適化機能を提供しています。このコンポーネントを使うことで、画像のリサイズ、Lazy Loading（遅延読み込み）、新しい画像フォーマットの利用（WebPやAVIFなど）などが自動的に行われ、コアウェブバイタルの向上に貢献します。

基本的な使い方

まず、ローカル画像を最適化する方法です。next/imageコンポーネントを使うと、画像のwidthとheightが自動的に設定され、レイアウトの安定性が保たれます。以下はその基本的な例です。

import Image from 'next/image';
import profilePic from '../public/me.png';
export default function Page() {
  return (
    <Image 
      src={profilePic} 
      alt="Profile Picture" 
      width={500} 
      height={500} 
    />
  );
}

ローカル画像の場合、import文を使って画像を直接読み込み、サイズやレイアウトの設定が容易にできます。また、リモート画像を使う場合、next.config.jsでリモートドメインを指定する必要があります。

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
      },
    ],
  },
};

レスポンシブ画像とレイアウト

next/imageでは、responsiveやfillのレイアウトオプションを使って、画面サイズに応じた画像の表示が可能です。特にレスポンシブ画像は、さまざまなデバイスでの表示最適化に役立ちます。fillレイアウトを使う場合、親コンテナにposition: relativeを指定する必要があります。

<Image 
  src="/image.jpg" 
  alt="Responsive Image" 
  layout="fill" 
  objectFit="cover" 
/>

Lazy Loadingと優先度の設定

next/imageでは、Lazy Loading（遅延読み込み）がデフォルトで有効です。これにより、画面に表示されるまで画像の読み込みが遅延し、ページの読み込み速度が向上します。ただし、画面上部に表示される重要な画像は、priorityプロパティを設定して、即時に読み込むようにします。

<Image 
  src="/hero.jpg" 
  alt="Hero Image" 
  width={1200} 
  height={800} 
  priority 
/>

画像のプレースホルダーと品質設定

画像が読み込まれる前に一時的なプレースホルダーを表示するには、placeholderプロパティを利用します。blurを使うと、ぼかし効果が適用され、ユーザー体験が向上します。

<Image 
  src="/image.jpg" 
  alt="Blur Image" 
  width={400} 
  height={400} 
  placeholder="blur" 
  blurDataURL="/small-image.jpg" 
/>

また、qualityプロパティで画像の圧縮率を調整できます。これにより、ファイルサイズと表示品質のバランスを取ることが可能です。

まとめ

next/imageは、手動で画像を最適化する手間を省き、ユーザー体験の向上やSEOに貢献します。特に、Lazy Loadingやレスポンシブ画像、プレースホルダーを活用することで、効率的な画像管理が可能です。正しい設定を行い、パフォーマンスを最大限に引き出すことがNext.jsでの画像最適化の鍵となります。