初めてのnpmパッケージ公開

rehype-probe-image-sizeというRehype Pluginをnpmパッケージとして公開した。
記事内の画像URLから画像サイズを取得し、imgタグにwidth/heightをセットしてくれる。

すでにrehype-img-sizeというnpmパッケージが存在していたのだけど、こちらはCDNなどの外部画像には対応していなかったので使えなかった。
rehype-probe-image-sizeでは、外部画像の場合はサイズ取得のためreadFileの代わりにfetchが走るようになっている。
ビルド時に画像サーバーへリクエストが必要なのは若干気になるが、サイズの取得だけであれば画像全体をダウンロードする必要はないので、大きな負荷になることはないはず。
その辺りの処理は、rehype-probe-image-sizeが依存しているprobe-image-sizeがよしなにやってくれている。

imgタグのwidth/height指定はHTML標準でも推奨されており、画像読み込みによるレイアウトシフトを避けるためには出来れば押さえておきたい項目。
なお、このブログはAMPに対応しているので必須要件だったりする。