CMS画像の読み込み時にレイアウトが動いたり、急に表示されたりする問題を抑えるためのUI設計です。画像の縦横比を事前に確保し、読み込み前からページの高さが変わらないようにします。
フェードインは画像要素が描画された時点ではなく、実際の読み込み完了後に開始します。低品質プレースホルダーや背景色を使う場合も、最終画像との明るさの差を小さくします。
Next.jsのImageコンポーネントでwidthとheight、またはfillとaspect-ratioを適切に指定します。開発環境だけで判断せず、本番ビルドと実機でもカクつきを確認します。