Next.js画像最適化のベストプラクティス：効果的な方法と手法の解説

現代のデジタル世界では、ウェブページやアプリにおいて画像は欠かせない要素となりました。

画像を使用することで、情報を迅速に伝えることができ、ユーザーエンゲージメントと体験を向上させることができます。

ただし、単に画像を追加するだけでは十分ではありません。画像を最適化することが重要です。

なぜなら、大きなサイズの最適化されていない画像は、ウェブサイトの読み込み速度を遅くし、ユーザーエクスペリエンスやコンバージョン率に悪影響を及ぼす可能性があるからです。

そのため、初めから画像最適化に注力することが不可欠です。特にNext.jsを使用している場合は、Imageコンポーネントを利用して効率的なNext.js画像最適化を実現することができます。

もしもあなたがNext.jsを利用しているアプリを開発している場合、本記事では効果的なNext.js画像最適化の方法について解説します。

しっかりと最適化を行い、ウェブサイトが異なるデバイス（PC、ラップトップ、スマートフォンなど）でも応答性を保つことができるようにしましょう。

読み進めることで、効率的な画像最適化の手法を学ぶことができます。

初心者向けに基本的な画像表示方法から、画像最適化に関するいくつかの、問題を検討し、そして単純なImageコンポーネントを使用してこれらの問題を解決していくベストプラクティスを説明致します。

最適化された画像処理
- 画像の表示方法

最適化された画像処理

VercelのNext.jsチームは、2020年に新しいImageコンポーネントを導入しました。

Imageコンポーネントは、Next.jsに組み込まれている改良版のimgタグであり、いくつかの便利な機能とパフォーマンス上の利点を提供しています。

これには、次のような「SUPERPOWERS」があります。

まず、Imageコンポーネントは画像の最適化を自動的に行います。画像サイズを適切に最適化することで、パフォーマンスが向上します。

また、さまざまなデバイスや画面サイズに合わせて、必要な解像度の画像を自動的に提供します。

次に、Imageコンポーネントはレイジーローディング（遅延読み込み）をサポートしています。

画像は、画面上に表示される直前まで読み込まれず、スクロールパフォーマンスが向上します。これにより、ページの読み込み速度が高速化されます。

さらに、Imageコンポーネントはブラウザのキャッシュを活用します。

生成された各画像サイズは、ブラウザのキャッシュに保存されます。

次回以降、同じサイズの画像が要求された場合には、サーバーにリクエストを送ることなくブラウザから直接読み込むことができます。

また、Imageコンポーネントはプレースホルダーのサポートも提供しています。

画像が読み込まれるまでの間、プレースホルダーが表示されます。これにより、画像の読み込み中にユーザーエクスペリエンスを向上させることができます。

これらの機能は、パフォーマンスの最適化やユーザーエクスペリエンスの向上に役立ちます。

ImageコンポーネントはNext.jsの一部であり、Next.jsプロジェクトで簡単に利用することができます。

画像の表示方法

Next.jsでは、画像を表示するために<Image>コンポーネントを使用します。このコンポーネントは、画像の最適化と遅延読み込みを自動的に処理します。

Next 13では、Imageコンポーネントに多くの新機能が追加されており、以前のバージョンと多少変更点があります。

以前では、画像を表示したいNext.jsのページやコンポーネントで、next/imageモジュールをインポートしましたが、next/imageではなく、next/legacy-imageを使用する必要があります。

import Image from 'next/legacy-image'

また、next/legacy-imageを使用する場合、新しい機能（例えば、priority propやlayout prop）は使用できないため、注意が必要です。

nextjs.org

next/legacy-imageは、新しい機能をサポートしていないため、新しいImageコポーネントに移行する必要があります。

そのため、Next.jsには2つのコードモッドが用意されています。

next-image-to-legacy-image

このコードモッドは、next/imageのインポートを自動的にnext/legacy/imageにリネームし、Next.js 12と同じ動作を維持します。

これにより、Next.js 13に迅速に自動更新することができます。

以下は、next-image-to-legacy-imageの実行例です。

npx next-image-to-legacy-image

next-image-experimental

このコードモッドは、next-image-to-legacy-imageを実行した後、任意で実行することができます。

このコードモッドにより、/legacy/imageを新しいnext/imageにアップグレードすることができます。

ただし、このコードモッドは実験的であり、動的な使用には対応していません。

以下は、next-image-experimentalの実行例です。

npx next-image-to-legacy-image
npx next-image-experimental

next-image-experimentalは、next/legacy/imageを新しいnext/imageにップグレードするための実験的なコードモッドであり、動的な使用には対応していないため、初心者には少し複雑かもしれません。

ですので本日では、デモンストレーションの為に、next-image-to-legacy-imageにしましょう。

つまり、基本的にはNext.js 13でImageコンポーネントを使用する場合は、まずnext-image-to-legacy-imageを実行して、next/imageのインポートを自的にnext/legacy/imageにリネームする必要があります。

これにより、Next.js 12と同じように動作するとができます。

Next.js 12と同じように動作するため、比較的簡単に実行できます。

以下のコマンドを実行して、next-image-to-legacy-imageを実行します。

next-image-to-legacy-image

これにより、next/imageのインポートが自動的にnext/legacy/imageにリネームされます。

次に、<Image>コンポーネントを使用して画像を表示します。<Image>コンポーネントには、src属性とalt属性が必要です。

import Image from 'next/legacy-image'

<Image src="/path/to/image.jpg" 
alt="Image description" 
/>

src属性には画像のパスを指定します。

通常、Next.jsでは「/public」ディレクトリ内の画像ファイルを参照するため、パスの先頭に/を付けます。

例えば、「/public/images」ディレクトリ内にimage.jpgがある場合、src属性に"/images/image.jpg"を指定します。

alt属性には画像の代替テキストを指定します。これは、画像が表示されなかったりアクセス不能な場合に代わりの情報を提供するためのものです。

さらに、コンポーネントには、幅と高さのプロパティを指定することもできます。

これにより、画像の表示サイズを制御できます。

<Image src="/path/to/image.jpg" 
alt="Image description" 
width={500} 
height={300} 
/>

このようにすると、画像は指定した幅と高さで表示されます。

widthとheightプロパティはピクセル単位で指定します。

<Image>コンポーネントは画像の最適化と遅延読み込みを自動的に処理するため、パフォーマンスの向上に役立ちます。

画像のプリローディングについて

画像のプリローディングは、画像が表示される前に事前に読み込まれることを意味します。

それにより、ユーザーが画像を見る前にロード時間が発生することなく、スムーズなユーザーエクスペリエンスを提供することができます。

Next.jsのnext/imageコンポーネントは、画像のプリローディングを自動的に行ってくれます。

開発者が手動でプリローディングを実装する必要はありません。

next/imageコンポーネントは、画像が画面内に表示される前に非同期で読み込まれます。

ブラウザは画像をバックグラウンドで読み込むため、ユーザーが画像を見る前にロード時間が発生することはありません。

この仕組みにより、スムーズなユーザーエクスペリエンスを実現することができます。

したがって、Next.jsを使用して画像を表示する場合、next/imageコンポーネントを使用するだけで、画像のプリローディングに関する手動の実装は必要ありません。

next/imageコンポーネントは、画像の最適化、レスポンシブな表示、プリローディングなど、画像関連の最良のプラクティスを自動的に処理します。

最適化オプション

layoutおよびquality

Next.jsの<Image>コンポーネントは、画像の表示パフォーマンスを向上させるための最適化オプションを提供しています。

例えば、layout属性を使用して画像のレイアウトを指定したり、quality属性を使用して画像の品質（圧縮率）を調整したりすることができます。

ただし、layoutプロパティやqualityプロパティは、next/legacy-imageの<Image>コンポーネントでは使用できません。

これらのプロパティは、新しいnext/imageコンポーネントでのみ使用できます。

この新しい機能を使用するには、next-image-experimentalを実行して、next/imageコンポーネントに移行する必要があります。

<Image 
src="/path/to/image.jpg" 
alt="Image description" 
layout="responsive" 
quality={80} 
/>

qualityは基本的に、最適化された画像の画質を決定する整数となります。

このパラメータの値の範囲は「1 ～ 100」で、75がデフォルト設定となっています。

より詳細なオプションについては、Next.jsの公式ドキュメントを参照してください。

sizes

Next.jsのImageコンポーネントにはsizesオプションがあります。

これにより、画像のレスポンシブなサイズ指定を行うことができます。

sizesオプションは、<Image>コンポーネントのlayoutプロパティがresponsiveに設定されている場合に使用されます。

sizesオプションは、ブラウザに画像の表示サイズを伝え、適切なイメージサイズを選択するためのヒントを提供します。

以下に、Next.jsのImageコンポーネントでsizesオプションを使用する例を示します。

<Image
        src="/path/to/image.jpg"
        alt="Image"
        layout="responsive"
        sizes="(max-width: 768px) 100vw, 50vw"
      />

上記では、layoutプロパティがresponsiveに設定されており、sizesオプションにサイズ指定の規則を指定しています。

sizesオプションはメディアクエリと画像サイズの関係を表現し、ブラウザに対して適切な画像サイズを選択するヒントを提供します。

<Image
        src="/path/to/image.jpg"
        alt="Image"
        layout="fill"
        sizes="(min-width: 60em) 24vw, 
        (min-width: 28em) 45vw, 100vw"
        quality={80}
      />

上記では、layoutプロパティをfillに設定し、sizesオプションで異なるビューポートサイズに対して画像の表示サイズを指定しています。また、qualityオプションには品質の値として80を指定しています。

これにより、画像は親要素のサイズいっぱいに表示され、ビューポートサイズに応じて適切な画像サイズが選択されます。

ただし、注意点として、layout="fill"を使用する場合、親要素に対して相対的なサイズ指定が必要となります。

具体的には、親要素に適切な幅と高さのスタイルを設定するか、親要素がサイズを持つインラインまたはブロック要素である必要があります。

Next/Image高度なProps

< Image />コンポーネントは、画像の動作を変更するために使用できる高度なプロパティも提供します。

それらを紹介致します。

画像のplaceholder

画像がまだ読み込まれていない場合や、読み込み中の場合にプレースホルダーを表示することで、ユーザーに視覚的なフィードバックを提供することができます。Next.jsの<Image>コンポーネントは、placeholder属性を指定してプレースホルダー画像を表示する機能を提供しています。

<Image 
src="/path/to/image.jpg" 
alt="Image description" 
placeholder="blur" 
/>

placeholder属性には、blurやemptyなどの値を指定できます。

objectPosition

Next.jsのImageコンポーネントのobjectPositionプロパティは、画像を親コンテナ内でどの位置に配置するかを指定するためのものです。

このプロパティは、親コンテナ内での水平方向と垂直方向の位置をピクセルまたはパーセンテージで指定することができます。

objectPositionプロパティには、以下のような値を指定することができます:

・ "top": 画像を親コンテナの上端に配置します。

・ "bottom": 画像を親コンテナの下端に配置します。

・ "left": 画像を親コンテナの左端に配置します。

・ "right": 画像を親コンテナの右端に配置します。

・ "center": 画像を親コンテナの中央に配置します。

・ "top left": 画像を親コンテナの左上に配置します。

・ "top right": 画像を親コンテナの右上に配置します。

・ "bottom left": 画像を親コンテナの左下に配置します。

・ "bottom right": 画像を親コンテナの右下に配置します。

・ピクセルまたはパーセンテージ値: 画像を親コンテナ内の特定の位置に配置します。例えば、「"50% 50%"」では画像を親コンテナの中央に配置します。

import Image from 'next/image';

const MyComponent = () => {
  return (
    <div style={{ width: '500px', height: '300px', position: 'relative' }}>
      <Image
        src="/path/to/image.jpg"
        alt="Image"
        width={500}
        height={300}
        objectFit="cover"
        objectPosition="top right"
      />
    </div>
  );
};
export default MyComponent;

上記では、親コンテナの幅は500px、高さは300pxに設定されています。objectFitプロパティはcoverに設定されており、画像が親コンテナにフィットするように拡大または縮小されます。

また、objectPositionプロパティはtop rightに設定されています。

これにより、画像が親コンテナの右上に配置されます。

また、上記の例ではインラインスタイルを使用して親コンテナのサイズと位置を指定していますが、実際のアプリケーションではCSSクラスや別の方法を使用してスタイリングすることもできます。

objectPositionプロパティを使用することにより、視覚的なレイアウトやデザイン上の要件に合わせて画像を配置することができます。

Next.jsのImageコンポーネントのloadingプロパティは、画像の読み込み中に表示されるローディング状態を制御するためのものです。

このプロパティには以下の3つの値を指定することができます。

・ "lazy": 画像は遅延読み込みされます。画像が画面内に表示される直前に読み込みが開始され、画像が表示されるまでローディング状態が表示されます。

・ "eager": 画像は即座に読み込まれます。画像の読み込みが開始されるとすぐに表示されます。

・ "unspecified": 既定値で、ブラウザのデフォルトの読み込み動作に従います。

以下に、loadingプロパティを使用する例を示します。

 <Image
        src="/path/to/image.jpg"
        alt="Image"
        width={500}
        height={300}
        loading="lazy"
      />

上記では、loadingプロパティに"lazy"を指定しています。これにより、画像は遅延読み込みされ、画像が画面内に表示される直前に読み込みが開始されます。

注意点として、loadingプロパティはNext.jsのImageコンポーネントでのみ使用できます。通常の<img>タグでは使用できません。

blurDataURL

blurDataURLは、Next.jsのImageコンポーネントによって生成される画像のぼかしデータURL（Data URL）を指します。

ぼかしデータURLは、元の画像のぼかしバージョンを表す画像データのエンコードされた文字列です。

Next.jsのImageコンポーネントでは、ブラウザによるレイアウトシフト（layout shift）を防ぐため、画像の読み込み前にぼかしバージョンを表示することができます。このぼかしバージョンは、元の画像の外形やサイズを保持しながら、ローディング中のプレースホルダーとして使用されます。

ぼかしデータURLは、元の画像をブラウザ上でぼかして生成されます。

これにより、元の画像の読み込みが完了する前に、ぼかしバージョンを表示することができます。画像のぼかし処理はブラウザ上で行われるため、通信の待ち時間が発生せず、ユーザーにより良いユーザーエクスペリエンスを提供することができます。

以下に、Next.jsのImageコンポーネントでblurDataURLを使用する例を示します。

const MyComponent = () => {
  const blurDataURL = '/path/to/blur-image.jpg';

  return (
    <div>
      <Image
        src="/path/to/image.jpg"
        alt="Image"
        width={500}
        height={300}
        placeholder="blur"
        blurDataURL={blurDataURL}
      />
    </div>
  );
};

上記では、placeholderプロパティに"blur"を指定しています。また、blurDataURLプロパティにはぼかしデータURLのパスを指定しています。

ぼかしデータURLは通常、サーバーサイドで動的に生成され、ページの初回レンダリング時に提供されます。このようにすることで、画像のぼかしバージョンが早期に表示され、ユーザーにローディング状態を視覚的に伝えることができます。

Style

Next.jsのImageコンポーネントでは、styleプロパティを使用して画像にスタイルを適用することができます。

styleプロパティを使用すると、CSSスタイルオブジェクトを指定して画像のスタイリングをカスタマイズすることができます。

また、このプロパティには、キャメルケースでスタイルプロパティ名を指定し、それに対応する値を設定します。

以下に、Next.jsのImageコンポーネントでstyleプロパティを使用する例を示します。

import Image from 'next/image';

const MyComponent = () => {
  const imageStyle = {
    width: '300px',
    height: '200px',
    borderRadius: '8px',
    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
  };

  return (
    <div>
      <Image
        src="/path/to/image.jpg"
        alt="Image"
        width={500}
        height={300}
        style={imageStyle}
      />
    </div>
  );
};

export default MyComponent;