こんにちは、エンジニアのオオバです。

→11万文字で徹底解説した「DOTweenの教科書」Unityアニメーションの超効率化ツールはこちら

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

Assets - Assets, Metadata, and CSS | Learn Next.js
Next.jsのチュートリアルを続けていきます。

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

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

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

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

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内の``の後に記述します。

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

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

WebPにマークが付きます。

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

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

Imageコンポーネントの公式リファレンスはコチラ
next/image | Next.js

最後に

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

Metadata - Assets, Metadata, and CSS | Learn Next.js

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

• Node.js v14.7.0
• npm 6.14.8
• macOS Catalina 10.15.7