画像表示を最適化してレイアウトシフトを防ぐ

[gaaamii]

ブログ記事内の画像表示によるレイアウトシフトを防ぎたい。

現状

118ba27d660d12e77bb65b24de717d10.mp4

画像表示の領域が確保されておらず、ガクッとする。

どうしたいか

ガクッという感じがなくしたい。

どうするか（ざっくり）

瞬時に画像枠の幅と高さを確保する。

どうするか（詳しく）

どうやら最新のベストプラクティスとしては、width属性とheight属性を指定するだけで良いらしい。

現在HTMLの出力はreact-markdownというライブラリでやっているので、このコンポーネントのcomponents propsにimgのものを追加し、そこにwidthとheightが入るようにする必要がある。ただ、ソースコードの時点ではもちろん画像のアスペクト比はわからない。どうしたものか。

検索すると、以下の記事が参考になりそう（ありがたや）。

Next.js で Markdown 中の画像を next/image に対応させる

こちらの記事だと、画像のサイズを取得する処理をrehypeプラグインに書いている。rehypeはHTMLを入力としてHTMLを出力するようなもので、今回の場合だとimgのwidthとheightを差し込むことがこれによって可能になるようだ。

上記の記事にもあるように、画像のサイズを取得するには https://github.com/image-size/image-size というライブラリが使えそう。https://github.com/image-size/image-size#using-a-url を見るとURLからサイズを取得する方法がわかる。

でもあれだな、そのまま書くとwidthとheightの取得を待ってくれないな。rehypeプラグインの処理を待つことはできないだろうか。

参考

• Cumulative Layout Shift を最適化する

[gaaamii]

done by #512