Astroでpictureタグと背景画像の画像最適化したい

やりたいこと

<picture>
  <source srcset="画像のパス" media="(min-width: 1024px)">
  <img src="画像のパス" alt=”代替テキスト”>
</picture>

Astro v4.2時点ではImageコンポーネントとPictureコンポーネントが定義されているが、背景画像や画面幅での出しわけができない。

公式のImageコンポーネントは使わないが、画像のimportまでは公式を踏襲。
pictureタグのsrcに当てはめて独自に対応。
サードパーティのプラグインに頼らないので良さそう。

同時にpictureタグをwrapしたコンポーネント作ったらさらに良くなるかもしれない。
背景画像もこの方法で行けるかは要検討。

pictureタグをwrapしてやるの良さそうですね。

あとAstroにはgetImage()関数というのがあるみたいなのでこれでカスタムコンポーネントを作るとかも良さそうです。🤔

importした画像をpictureタグにそのまま入れても最適化処理は行われていないのでgetImage()関数使うのよさそうです！参考になりました！

やりたいことが満たされている。
懸念点として、公式のアップデートスピードに追いついていないところ。
公式のアプデが早すぎるんだけど、現時点で半年くらい更新されていないのが気になる。

qiitaの記事に書いてある通り不要なコードが入ってきてコントロールが難しそう。
実際に試したけど、breakpointやmedia指定で画面幅指定しても変わってくれなかった。
指定が間違っているだけかもしれないけど、単純にPC/SP切り替えたいだけの用途にはオーバースペック感。

結局getImage()関数を使ってコンポーネントを自作することにしたので別で記事書く。
背景画像はコンポーネント化するの難しそう。