Next.jsでの開発時はnext/imageを使うと良いかも

Next.jsにはnext/imageという画像表示を最適化してくれるサービスがあります。
普通のimgを使うより、どう違うのか比べてみます。

next/imageを使うメリット

１、画像の最適化

next/imageを使うことで画像を表示する際にサーバー側で最適な拡張子、サイズに調整してくれます。
最近登場したwebpに自動で変換してくれることが多いです。

２、画像のリサイズ

表示するブラウザのサイズによって自動的にサイズを変更してくれます。

3、自動で遅延読み込みしてくれる

遅延して読み込むとで大量に画像を表示する場合でも高速化してくれます。

その他

その他にも色々と通常のimgタグを使用するよりメリットがある反面、実装がちょっと大変だったりします。

実装

<>
    <Image src="/images/sample3.png" alt="" width={1000} height={250} /> // next/imageを使用
    <img src="/images/sample3.png" alt="" width={1000} height={250} /> // 通常のimgを使用
</>

↑プロジェクト内の画像を参照するときはimgタグと同じような感じで実装できますが、
URLでの指定となるとドメインを設定したりと若干面倒です。

公式：https://nextjs.org/docs/api-reference/next/image
myLoaderというプロパティに定義する必要があります。

ブラウザの検証ツールで確認

networkタブで確認してみると、next/imageで表示した方の拡張子はwebpになってて、細部も3分の１、表示も2分の１になってます！
凄い