配信画像の最適化やってみた

今更ながら画像の配信にAstroのPictureコンポーネントを利用するようにしました。それと合わせて、AVIFの画像を配信するようにしてみました。

以前、記事の管理をmicroCMSでできるように変更した際、画像ファイルの配信もそこから行うようにしました。

そのままmicroCMSのCDNで配信するのもいいんですが、Astroで提供されているPictureコンポーネントも色々できそうだったので使ってみたいと思ってました。それをなんとなーくLLMに相談したら大体の実装までしてくれちゃいました（本当は自分で書くつもりだった）。

AstroのPictureコンポーネントを使うメリットとしては、

が挙げられます。デメリットは別々で配信していたのであれば、一つにすることで当然配信元（本ブログの場合はVercel）へのリクエストが増えます。このブログは大してアクセスも無いのでまだどっちでも良さそうです。分散という意味で分けるのもありなんでしょうか...?

配信フォーマットにWebPとAVIFの2つを指定して、AVIFが表示できない際はWebPを表示するようにしました。AVIFという形式については名前だけ知っていたぐらいでどれぐらいメリットが有るのか分からなかったのですが、先日拝見した記事で紹介されていたのをみて興味が出てきました。

AVIFはjpgより圧縮した際の効率や細部のディテールの表現がしっかり残るようです。実際、ビルド時のファイルサイズをみてみたらWebPと比較しても半分以下になっているファイルがありました。今後写真を載せる際には、いい感じに圧縮され綺麗だけど少ないトラフィックで済むを期待しています。

デメリットを追加で一つ挙げると、フォーマットが2つになったことでビルド時間は結構伸びました。一応、以前のビルド時にキャッシュしたものをもってきていた画像もあったので全部作り直しというわけではない？と思われますが、今後画像が増えていったときにどうなるかは分からないですね...