渋谷ほととぎす通信

Unity・ゲーム開発 技術で一生食べていく情報発信

画像は自動に最適化されるNext.jsすごい

f:id:esakun:20210220045100p:plain

Next.jsは画像を自動で最適化する

Next.jsのチュートリアルを続けていきます。

今回は静的ファイル、画像の扱いです。
Next.jsはブラウザに合わせて自動
最適化された状態でレンダリングします。

静的ファイルはpublicディレクトリへ格納

まず表示させる画像をルートのpublicディレクトリに格納します。
今回はpublicの中にimagesディレクトリを作りました。
またpublicディレクトリrobot.txtを置く場所としても活用します。

f:id:esakun:20210220042418p:plain:w120

この画像を次のパスに配置します。

public/images/profile.png

imgタグは使う意味はない

通常ならこのようにHTMLを記述していく事になると思いますが、
以下の処理を手作業でする必要のある最適化されていない手法です。

<img src="/images/profile.png" alt="Your Name" />
  • 異なる画面サイズでも画像の応答性を確保する
  • サードパーティのツールやライブラリを使用して画像を最適化する
  • ビューポートに入ったときだけ画像を読み込む

Imageコンポーネントを使う

imgタグの代わりにImageコンポーネントをNext.jsでは使用します。

Next.jsはデフォルトでImage Optimizationをサポートしています。
ブラウザがサポートしている場合にはWebPのような
最新の形式で画像をリサイズ、最適化、配信ができます。

これによりビューポートの小さいデバイスに
大きな画像を配信する必要がなくなります。

またNext.jsは将来の画像フォーマットを自動的に採用し、
それらのフォーマットをサポートするブラウザに画像を提供することができます。
しかも画像の自動最適化は、どのような画像でも動作します。

<Image
  src="/images/profile.png"
  height={144}  // 高さ指定
  width={144}  // 幅指定
  alt="Your Name"
/>

こちらのコードを前回の記事に続く形で、
index.js内の</h1>の後に記述します。

f:id:esakun:20210220041537p:plain:w450

このようにImageコンポーネントを使って、
静的画像をレンダリングすることが出来ました。

コチラのChrome拡張で確認したのですが、
pngファイルだったものが自動で最適化され、
WebPでレンダリングされていました。

f:id:esakun:20210220044926p:plain:w200 WebPにマークが付きます。

その他Imageコンポーネントのメリットまとめ

  • ユーザーリクエスト時に画像最適化する
  • 画像数が増えてもビルドが長くなることはない
  • デフォルト遅延ロードするからページ読み込みのペナルティはない

Imageコンポーネントの公式リファレンスはコチラ

最後に

チュートリアル進める中で自動で最適化してくれる
Imageコンポーネントがすごいなと思いました。

次回はHead、metadataについてです。