Next.js 10 の画像最適化システム next/image を読んで理解を深める

※ ソースコードは 2020/11/20 時点の canary ブランチを参照しています。 Next.js 10 では next/image から提供されるコンポーネントを使用することで、開発者が特別に意識することなく画像を最適化することができるようになりました。リリースのタイミングで Next.js Conf が開催されていたこともあり、この機能は大きく話題になりました。 今回はコードを読みながら最適化の裏側を紐解いて next/image の理解を深めようと思います。 何を調べるのか 目的を持たずに読んでいると露頭に迷いそうなので、最初に何を調べるのか決めました。 今回は最適化の仕組みを紐解くことを目的として、コードを読みながら次の 2 つについて調べます。 最適化された画像の出し分け 画像最適化処理 結論 最適化された画像の出し分け img 要素の srcset 属性を利用して画面サ

[efcl]

next/imageについて

[tyahha]

Next.js10の画像最適化の仕組みを理解するときに参考にする

[d4-1977]

CWVの対応とかしていると、画像の配信は色々やることが増えたって感じます。そのあたりについて踏み込んだ、検討した実装になっていて、これらのことを普段の業務でやれる？やっていく？かはまだ検討中

[internetkun]

事実誤認が沢山含まれているのでこの記事ではなく自分でソースコード（canaryブランチでなくv10.0.xタグがつけられているもの）を読んで確認して理解を深めたほうがいいと思います