Next.jsの画像最適化を検証してみる

この記事はNext.js Advent Calendar 2020の11日目の記事です
（本当はNextAuth.jsを試してみようと思いましたが意外と難しくて時間が足りませんでした。。）

概要

• 2020年10月にリリースされたNext.jsのv10で画像の最適化の仕組みが入りました
  • Next.js v10のリリースブログ
• この画像最適化の仕組みが適用されていることをサンプルアプリを通じて確認してみたいと思います

Next.jsの画像最適化

• 上記ブログ記事によると主に以下のような背景で機能が導入されました

課題

• Webページにおける画像はLargest Contentful Paintに大きな影響を与える
• レスポンシブ対応のためにimgタグにwidth heightを指定しないケースがあり、その場合カクンとなるレイアウトシフトが発生してしまう

解決策

• Next.jsでimgタグをラップしたImageコンポーネントを提供し、それを使うだけで上記の課題を全て解決させる
  • クライアントの環境に応じて適切な形式（WebPなど）に変換しファイルサイズも縮小してくれる
  • width heightを指定しても縦横比を維持したまま自動でレスポンシブ対応してくれる

サンプルアプリで検証

• ファイルサイズの大きい（12.6MB）画像を用意して、imgタグとImageコンポーネントでそれぞれ表示してみます
• 使うタグ以外は同じ属性を設定します
• 検証に使ったページはこちらです
  • https://next-image-sample.vercel.app/

import Image from 'next/image';
import Layout from '../components/Layout';

const IndexPage = () => (
  <Layout>
    <img src="/sample.png" width="270" height="480" />
    <Image src="/sample.png" width="270" height="480" />
  </Layout>
);

export default IndexPage;

検証1:ファイルサイズ/形式の最適化の確認

• 注目する箇所に赤枠をつけました
  • imgタグで読み込まれた1枚目は元画像のままpngで12.6MBあります
  • Imageコンポーネントで読み込まれた2枚目はwebpで221kbになっています！
• ちゃんと最適化されていることが確認できました
  • 極端な例ではありますがレスポンスタイムも大違いですね！

検証2:レスポンシブ対応の確認

• ちょっと見づらいですがウィンドウサイズを狭めてみました
  • imgタグで読み込まれた1枚目はwidthのサイズのままで横スクロールが発生しています
  • Imageコンポーネントで読み込まれた2枚目はウィンドウサイズに合わせて縮小されています！
    • キャプチャではわかりませんがレイアウトシフトも発生しません！

まとめ

• imgタグを使うのと同じ感覚でImageコンポーネントを使うだけで最適化が施されていることを確認できました
• Next.jsの利用者側は何の負担もないので今後当たり前に使っていくといいですね！