imgタグがあるのに、なぜImageを使うの？

HTMLで画像を表示するときは、 次のようにimgタグを使います。

<img
  src="/images/photo.jpg"
  alt="記事の写真"
>

Next.jsでは、同じ画像を次のように書けます。

import Image from "next/image";

<Image
  src="/images/photo.jpg"
  alt="記事の写真"
  width={800}
  height={500}
/>

大きな理由は、 Webサイトで使う画像を効率よく配信し、 ページを快適に表示するためです。

HTMLのimgタグとは？

imgタグは、 HTMLで画像を表示するための要素です。

基本的な書き方

<img
  src="/images/cat.jpg"
  alt="窓辺に座っている猫"
  width="800"
  height="500"
>

imgタグはシンプルで自由度が高く、 ブラウザーが標準で理解できる画像要素です。

Next.jsのImageとは？

Imageは、 Next.jsが提供するReactコンポーネントです。

HTMLのimgタグをもとにしながら、 画像のサイズ調整や遅延読み込みなど、 Webページの表示を助ける仕組みが追加されています。

最初にimportする

import Image from "next/image";

JSX内にImageを書く

export default function Page() {
  return (
    <Image
      src="/images/cat.jpg"
      alt="窓辺に座っている猫"
      width={800}
      height={500}
    />
  );
}

TSXでは、 数値を文字列ではなくJavaScriptの値として渡すため、 width={800}のように波括弧を使います。

imgタグとImageの主な違い

どちらも画像を表示しますが、 Next.jsのImageにはWebサイト向けの最適化機能があります。

画像最適化とは？

Webサイトの画像は、 ページのデータ量の中でも大きな割合を占めやすい要素です。

たとえば、横幅2000pxの大きな写真を スマートフォンの小さな画面へそのまま配信すると、 必要以上に大きなデータを読み込むことになります。

Imageを使うと、 ブラウザーは用意された画像候補の中から、 表示環境に合ったサイズを選びやすくなります。

画像読み込み時のレイアウトずれを防ぐ

ページを開いた直後、 画像の読み込みが終わってから文章やボタンが 下へ押し出されることがあります。

Imageでは、 widthとheightから画像の比率を判断し、 読み込み前から必要な領域を確保できます。

public内の画像を表示する

Next.jsでは、 publicフォルダーへ画像を置くと、 URLの先頭から画像を指定できます。

import Image from "next/image";

export default function Page() {
  return (
    <Image
      src="/images/cat.jpg"
      alt="窓辺に座っている猫"
      width={800}
      height={500}
    />
  );
}

画像をimportして表示する

プロジェクト内の画像は、 ファイルとしてimportして表示する方法もあります。

import Image from "next/image";
import catImage from "./cat.jpg";

export default function Page() {
  return (
    <Image
      src={catImage}
      alt="窓辺に座っている猫"
    />
  );
}

画像を静的にimportした場合は、 Next.jsが画像ファイルの横幅と高さを取得できるため、 widthとheightを 省略できる場合があります。

microCMSなどの外部画像を表示する

microCMSから取得したアイキャッチ画像は、 Next.jsのプロジェクト内ではなく、 外部のサーバーに保存されています。

Imageへ画像URLを渡す

<Image
  src={article.eyecatch.url}
  alt={article.title}
  width={article.eyecatch.width}
  height={article.eyecatch.height}
/>

ただし、外部画像をImageで表示するには、 許可する画像URLを next.config.tsなどへ設定します。

remotePatternsを設定する

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.microcms-assets.io",
      },
    ],
  },
};

export default nextConfig;

fillを使って枠いっぱいに表示する

記事カードのサムネイルなどでは、 画像を決められた枠いっぱいに表示したいことがあります。

そのようなときは、 widthとheightの代わりに fillを使えます。

<div className="thumbnail">
  <Image
    src={article.eyecatch.url}
    alt={article.title}
    fill
    sizes="(max-width: 767px) 100vw, 400px"
  />
</div>

.thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
}

.thumbnail img {
  object-fit: cover;
}

sizesは何のために使う？

sizesは、 画像が画面上でどのくらいの横幅になるかを ブラウザーへ伝えるための指定です。

Imageが画面上で400px程度しか使われないのに、 ブラウザーが非常に大きな画像を選ばないようにするための 手掛かりになります。

object-fitで画像の見せ方を調整する

画像の縦横比と表示枠の縦横比が違う場合は、 CSSのobject-fitで見せ方を調整できます。

.thumbnail img {
  object-fit: cover;
}

alt属性には何を書く？

Imageでもimgタグと同じように、 alt属性が必要です。

altには、 画像が表示されない場合や、 画像を視覚的に確認できない場合でも内容が伝わるように、 画像の意味を簡潔に書きます。

記事タイトルを利用する例

<Image
  src={article.eyecatch.url}
  alt={`${article.title}のアイキャッチ画像`}
  width={article.eyecatch.width}
  height={article.eyecatch.height}
/>

ページ上部の重要な画像

通常のImageは、 画面に近づいたタイミングで読み込む遅延読み込みを利用します。

ただし、ページを開いた直後から見えるメインビジュアルなどは、 早く読み込みたい重要な画像です。

<Image
  src="/images/main-visual.jpg"
  alt="サービスのメインビジュアル"
  width={1600}
  height={900}
  preload
/>

Next.jsでもimgタグを使う場面はある？

Next.jsだからといって、 すべてのimgタグが禁止されるわけではありません。

Next.jsの画像最適化を利用しないほうが適切な画像や、 特殊な実装ではimgタグを選ぶ場合があります。

よくあるつまずき

import Image from "next/image";

<Image
  src="/images/cat.jpg"
  alt="窓辺に座っている猫"
  width={800}
  height={500}
/>

.thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

<Image
  src={article.eyecatch.url}
  alt={article.title}
  fill
  sizes="(max-width: 767px) 100vw, 400px"
/>