Next.js Imageコンポーネント widthとheightの指定による表示の変化

検証サイト

はじめに

Next.js の next/image は画像を自動最適化してくれる便利なコンポーネントですが、width / height の指定方法を誤ると「ガビガビ」になったり、思った通りのサイズで表示されなかったりします。

本記事では、同じ 画像を

• 50px

• 150px

• 300px

• 500px

• 600px

• 1000px

• 1200px

• 1500px

• 2000px

の 9 種類の解像度で用意し、4 つの指定パターンで表示結果を検証しました。

検証環境

• Next.js 16.2.6

• React 19.2.6

• Tailwind CSS v4

• TypeScript 5

① 親要素指定なし・子要素 width={300} height={300}

<div>
  <Image
    src="/img/300px.png"
    alt="300px"
    width={300}
    height={300}
  />
</div>

結果

• レスポンシブに対応する

• どの解像度の元画像でも、ブラウザ 100% 表示ではガビガビする

• 拡大すると「600px 以上」の元画像はきれいに見えるが、一定サイズ以上には拡大されない

② 親要素 w-[300px] h-[300px]・子要素 width={300} height={300}

<div className="w-[300px] h-[300px]">
  <Image
    src="/img/300px.png"
    alt="300px"
    width={300}
    height={300}
  />
</div>

結果

• ① と同じ結果になる

• ブラウザ 100% 表示ではガビガビ

• 拡大すると一定の大きさまではきれいだが、それ以上はすべてガビガビになる

③ 親要素 w-[300px] h-[300px]・子要素 width={600} height={600}（2 倍指定）

<div className="w-[300px] h-[300px]">
  <Image
    src="/img/600px.png"
    alt="600px"
    width={600}
    height={600}
  />
</div>

結果

• 元画像「600px ～ 2000px」はきれいに表示される

• 表示サイズの 2 倍で指定することで、Retina ディスプレイなどの高解像度でも鮮明

• 拡大すると一定サイズまではきれいだが、それ以上はガビガビになる

④ 親要素 w-[300px] h-[300px]・子要素 fill

<div className="w-[300px] h-[300px] relative">
  <Image
    src="/img/2000px.png"
    alt="2000px"
    fill
  />
</div>

結果

• 元画像「600px ～ 2000px」はきれいに表示される

• 拡大すればするほど、高解像度画像が美しい

• 親要素には relative が必須（fill は absolute positioning されるため）

まとめ：用途別の最適な指定方法

結論

• 表示サイズの 2 倍の解像度画像を用意するのが基本（Retina 対応）

• 高画質が必要なら fill を使い、親要素に固定サイズを指定する

• 元画像が表示サイズより小さいと、どうやってもガビガビになる

• 素材は大きめを用意するのが鉄則

next/image を正しく使えば、画像最適化とパフォーマンスを両立できます。用途に合わせて指定方法を使い分けましょう。