Hugoで記事を作成する際に、Markdown Render Hooksを使ってimgタグにLazy Loading属性を追加する方法を書きましたが、今回は画像のサイズを取得してwidth属性とheight属性を追加してみます。

ブログなどで画像を多用する場合、一度に画像を全部ダウンロードするとページの読み込みが遅くなってしまいます。最近のブラウザには解決策としてLasy Loadingという機能があります。ブラウザの表示範囲外の画像はダウンロードを保留し、ユーザーがページをスクロールして画像のところまで来たらダウンロード、表示することでページの表示速度を向上させます。