【Next.js】next/image の使い方｜Image コンポーネントで画像を最適化する方法

Web ページの表示を重くする大きな原因のひとつが画像です。大きすぎる画像をそのまま読み込むと、通信量が増えて表示が遅くなり、読み込み中に他の要素がガタッと動く「レイアウトのずれ」も起きます。Next.js には、こうした画像の問題を自動で解決してくれる Image コンポーネント（next/image）が用意されています。この記事では、通常の <img> との違い、基本の使い方、fill・sizes・priority といったよく使う指定、外部URLの画像を使うための設定、そして alt の大切さまでを、初心者向けに解説します。なお、この記事は App Router を前提としています。

next/image で何が最適化されるのか

Image コンポーネントは、ただ画像を表示するだけでなく、表示を速くするためのさまざまな処理を自動で行います。通常の <img> タグとの違いを、まず整理しておきましょう。

ここで出てくる「レイアウトのずれ」は、Web の表示品質の指標である CLS（Cumulative Layout Shift）として測られる問題です。画像の場所をあらかじめ確保しておくことで、読み込み後に周りの文章が動いてしまう現象を防げます。Image はこれらを自動でこなしてくれるため、自分で細かい調整をしなくても最適化された画像表示が実現できます。

基本の使い方

プロジェクト内の画像（public フォルダや import した画像）を表示するのが、もっとも基本的な使い方です。next/image から Image を読み込み、src・alt・width・height を指定します。ここでは画像をインポートして使う例を見てみましょう。

import Image from 'next/image';
import logo from './logo.png'; // 画像をインポート

export default function Page() {
  return (
    <div>
      {/* インポートした画像は width/height が自動で決まる */}
      <Image src={logo} alt="サービスのロゴ" />

      {/* public 内の画像はパス指定 + width/height が必要 */}
      <Image src="/hero.jpg" alt="トップの写真" width={800} height={450} />
    </div>
  );
}

import した画像は、Next.js がビルド時にサイズを読み取るため width・height を書かなくても自動で設定されます。一方、public フォルダの画像をパス（/hero.jpg など）で指定する場合は、場所を先に確保するために width と height を明示する必要があります。ここで指定するのは「画像本来の縦横比」を伝えるための値で、実際の表示サイズは CSS で調整できます。

fill と sizes でレスポンシブに表示する

画像の縦横のサイズが事前に分からず、「親要素いっぱいに広げたい」ときは fill を使います。fill を指定すると width・height の代わりに親要素にぴったり広がるようになります。このとき親要素には position: relative を指定し、sizes で「画面幅に対して画像がどのくらいの幅で表示されるか」を伝えるのがポイントです。

import Image from 'next/image';

export default function Gallery() {
  return (
    <div style={{ position: 'relative', width: '100%', height: 300 }}>
      <Image
        src="/photo.jpg"
        alt="風景写真"
        fill
        sizes="(max-width: 768px) 100vw, 50vw"
        style={{ objectFit: 'cover' }}
      />
    </div>
  );
}

fill を使うと画像は親要素に合わせて広がるので、objectFit: 'cover' で切り取り方を調整します。sizes="(max-width: 768px) 100vw, 50vw" は「画面幅が 768px 以下なら画像は画面いっぱい（100vw）、それより広ければ画面の半分（50vw）で表示する」という意味です。この情報を元に、Next.js は無駄に大きすぎない適切なサイズの画像を配信します。fill を使うときは sizes も併せて指定すると、より効果的に最適化されます。

priority で重要な画像を先に読み込む

Image は初期状態で「画面に入ってから読み込む」遅延読み込みが有効です。これは多くの画像で有効ですが、ページを開いてすぐ見える大きな画像（ファーストビューのメインビジュアルなど）まで遅延させると、かえって表示が遅く感じられます。そうした最重要の画像には priority を付けて、優先的に読み込ませます。

import Image from 'next/image';

export default function Page() {
  return (
    <Image
      src="/hero.jpg"
      alt="トップのメインビジュアル"
      width={1200}
      height={600}
      priority // 最初に見える重要な画像を優先読み込み
    />
  );
}

priority は、ページを開いた瞬間に見える「もっとも大切な画像」1〜2枚だけに付けるのが基本です。すべての画像に付けると優先順位の意味がなくなり、逆効果になります。画面の下のほうにある画像は、初期設定のままの遅延読み込みに任せておきましょう。

外部URLの画像を使うとき

他のサイトやCDN上にある画像を src に URL で指定する場合は、そのままではエラーになります。これは、意図しないドメインの画像を最適化処理に通さないための安全策です。使いたい配信元を next.config の images.remotePatterns に登録すると、外部URLの画像も Image で扱えるようになります。

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.example.com',
      },
    ],
  },
};

export default nextConfig;

remotePatterns に許可したいホスト名を登録しておけば、<Image src="https://images.example.com/photo.jpg" ... /> のように外部URLの画像も表示できます。設定を変更したあとは開発サーバーを再起動してください。信頼できる配信元だけを登録することで、安全に外部画像を扱えます。

alt の指定を忘れない

Image では alt（画像の代替テキスト）が必須です。alt は、画像が表示できないときの代わりの説明であり、スクリーンリーダーを使う人が内容を理解するための手がかりでもあります。SEO の観点でも、画像が何を表すかを検索エンジンに伝える役割があります。写真やイラストなど意味のある画像には、内容を簡潔に説明する文を入れましょう。装飾目的で意味を持たない画像の場合は、alt="" と空文字にして「読み上げ不要」であることを明示します。いずれにしても alt を省略しないことが大切です。

まとめ

Next.js の Image コンポーネントは、画像の自動リサイズ・WebP などへの変換・遅延読み込み・場所の確保によるレイアウトのずれ防止を、まとめて引き受けてくれる仕組みです。基本は src・alt・width・height を指定し、サイズが可変なら fill と sizes、ファーストビューの重要な画像には priority を使います。外部URLの画像は next.config の remotePatterns に配信元を登録することで扱え、alt はどんな場合も省略しないのが基本です。通常の <img> の代わりに Image を使うだけで、表示速度と品質を大きく改善できます。

参考ページ

• Components: Image – Next.js
• next.config.js Options: images – Next.js
• Getting Started: Image Optimization – Next.js