pictureについて（ブラウザ幅での入替とavif使えない場合の入れ替え）

以下は、ブラウザの幅サイズによる画像の変更とavif使用の際に、ブラウザ対応の可否での画像変更を組み合わせたもの

<picture>
 <source media="(min-width: 321px)" type="image/avif" srcset="images/strong5-1.avif">
 <source media="(min-width: 321px)" type="image/png" srcset="images/strong5-1.png">
 <source type="image/avif" srcset="images/strong5-2.avif">
 <img src="images/strong5-2.png" alt="画像" />
</picture>

このコードの動作は以下の通りです。

ブラウザはタグを上から順にチェックします。

• 321px以上の幅の場合：
  まず type="image/avif" をチェックし、AVIFが使えるなら strong5-1.avif を表示して処理を終了します。
  AVIFが使えない場合、次の type="image/png" に進み、strong5-1.png を表示します。
• 320px以下の幅の場合：
  最初の2行（media属性）がマッチしないためスキップされます。
  3行目の type="image/avif" をチェックし、AVIFが使えるなら strong5-2.avif を表示します。
  AVIFが使えない場合、最後の タグに進み、strong5-2.png を表示します。

上記を分解した場合

ブラウザ幅のサイズによる画像の変更の場合

<picture>
  <source media="(max-width: 1000px)" srcset="strong5-1.jpg">
  <source media="(max-width: 800px)" srcset="strong5-2.jpg">
  <img src="strong5-3.jpg" alt="画像">
</picture>

avif使用の際に、ブラウザ対応の可否での画像変更

<picture>
  <source type="image/avif" srcset="strong5-1.avif">
 <img src="strong5-2.jpg" alt="画像" />
</picture>