💨

大量の画像をnext/imageと<img>でそれぞれ表示した場合の比較

に公開
Next.js
WebP
tech

Next.jsに組み込まれているnext/imageがどんな挙動をするのか簡単に検証してみました。

大量の画像をnext/imageで表示した場合と
<img>で表示した場合の比較をしてみたいと思います。

前提条件

ソースコード

<img>を使用したコード

const Page = () => {
  const dummyArray = [...Array(1000)]
  return (
    <div className={styles.container}>
      <p>default image</p>
      <div className={styles.image_container}>
        {dummyArray.map((_, i) => {
          return (
            <img
              key={`defaultImage-${i}`}
              src={`https://picsum.photos/400/200?random=${i}`}
              width={400}
              height={200}
            />
          )
        })}
      </div>
    </div>
  )
}

next/imageを使用したコード

import Image from 'next/image'
const Page = () => {
  const dummyArray = [...Array(1000)]
  return (
    <div className={styles.container}>
      <p>next/image</p>
      <div className={styles.image_container}>
        {dummyArray.map((_, i) => {
          return (
            <Image
              key={`nextImage-${i}`}
              src={`https://picsum.photos/400/200?random=${i}`}
              width={400}
              height={200}
            />
          )
        })}
      </div>
    </div>
  )
}

結果

画像形式


<img>の場合


next/imageの場合

next/imageの場合、Typeがwebpになっていることがわかります。
一つひとつの画像のTimeも<img>と比較すると10分の1程度になっています。

lazyload

next/imageはデフォルトでlazyloadされるようになっており、
ビューポート外の画像は読み込まれず、スクロールしてビューポートに入った画像が読み込まれるようになります。

Images are lazy loaded by default. That means your page speed isn't penalized for images outside the viewport. Images load as they are scrolled into viewport.
引用元：https://nextjs.org/learn/basics/assets-metadata-css/assets


<img>の場合


next/imageの場合

requestsの件数を見ます。
<img>の場合、ビューポート外の画像も読み込まれているのに対し、
next/imageはビューポート外の画像は読み込まれておらず、
しっかりlazyloadされています。

感想

next/imageはすごい。
これだけでもNext.jsを使って開発したいと思えるレベルです。

今回の検証で使ったページはVercelにデプロイしてます。

Discussion