結論
- Nextが提供するコンポーネントである
Next/Imageを通常のimgタグの代わりに使用すると、画像が自動的に最適化され、レイジーローディングがサポートされる。 -
sharpという画像処理ライブラリを使用して画像を最適化すると、効果は非常に大きい。
動機
- ブログの基本テーマのソースコードを見ていた際に、
Next/Imageコンポーネントが使われていることに気付き、調べてみた。 - ビルド時に以下のような警告が表示された。
Warning: For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'npm i sharp', and Next.js will use it automatically for Image Optimization.
適用方法
-
sharpライブラリをインストールすると、特別な設定なしでNextが自動的に画像を最適化してくれる。npm install sharp -
Next/Imageコンポーネントで優先的にレンダリングする画像にpriorityプロパティを追加することで、優先的にレンダリングすることが可能。import Image from 'next/image'; <Image src="/images/profile.jpg" alt="Profile Picture" width={500} height={500} priority />
適用結果
-
sharp適用前は、初回レンダリング時に1～2秒間画像の読み込みに時間がかかり、カクつく現象が見られたが、適用後はその現象が解消された。 -
ネットワークタブで確認したところ、画像の読み込みにかかる時間は以下のように短縮された。
- 適用前: 241ms以上
- 適用後: 28ms以下
（私の場合、画像サイズ自体は大きく減少しなかった。）
-
適用前
-
適用後
その他
-
Next/Imageコンポーネントは、Nextサーバーが動作する際に/_next/imageフォルダ内に最適化された画像を初回生成し、以降のリクエストではキャッシュされた画像を返す仕組みになっている。 - SVGとGIFは最適化されない。（PNG、JPEGなどがサポートされている。）
-
sharpは、Next公式ドキュメントでも本番環境で必ず使用するよう推奨されているライブラリ。