レイアウトシフトとは

Webページは画像の読み込みが完了する前に描画される。そのため、画像に対してレイアウトシフト対策が施されていない場合、画像が遅れて表示されると先に表示されていたコンテンツの表示位置がズレる現象（レイアウトシフト）が発生する。
レイアウトシフトはユーザーのストレスにつながるため、対策を行うことが望ましい。

レイアウトシフトを防ぐには

あらかじめ HTML&CSS で画像の「横幅」「高さ」「縦横比」のうち、2つ以上の情報をブラウザに伝える。それにより、ブラウザは画像の読み込み前に表示エリアを確保し、レイアウトシフトの発生を防ぐことができる。

`next/image`におけるレイアウトシフト対策の仕組み

next/imageは、Imageコンポーネントのwidthとheightで指定された値を元にレイアウトシフト対策を行う。ただ、<img />にwidthとheight属性を指定するだけのシンプルな対策には古いブラウザが未対応である。
そのため、古いブラウザでも機能する方法で対策が施される。この方法では、<span>で表示エリアを確保しておき、画像の読み込みが完了したら<span>に重ねて画像を表示する。Imageコンポーネントの出力に<span>が付加されるのはこのためである。