[HTML] picture要素の備忘録

webPやAvif対応ブラウザが少なかった頃にはよく使用していましたが、最近はご無沙汰になっていたpicture要素。

メディアクエリやファイル形式の違いなど、条件に応じた画像ファイルの出し分けを可能とする要素で、MDNではレスポンシブ画像の項目で説明されています。

たまに触ると使い方があやふやになっていたので、備忘録としてまとめます。

picture要素の基本の形

 <picture>
  <source srcset="FILE1" width="" height="" (条件)>
  <source srcset="FILE2" width="" height="" (条件)>
  <img src="Fallback_File" width="" height="" alt="">
</picture>

source要素に、条件とともに画像ファイルを指定します。このときsource要素にもwidth , height がある方が良いそうなので忘れずに指定します。

sourceは上から順番に検証され、条件に一致したsourceのsrcsetが採用されます。

最後のimg要素は、picture要素がサポートされていないケースで使用されます。

指定できる条件

sourceの条件には、メディアクエリ、ファイル形式（jpg,png,webpなど）が指定できます。

たとえば、

<picture>
  <source srcset="tate-image.jpg" media="(orientation : portrait)" width="100" height="500">
  <source srcset="yoko-image.jpg" width="500" height="100">
  <img src="yoko-image.jpg" width="500" height="100" alt="">
</picture>

とすると、ビューポートが縦長のときには縦長の画像を使う、そうでなければ横長の画像を使う　という出し分けができです。

picture要素を使うまでもないケース

同じ画像を拡大/縮小しているだけで、単にスクリーンサイズに応じた出し分けをするだけなら、img要素（+ srcset属性 + sizes属性）だけで対応できます。

picture要素のsrcset属性にも複数ファイルを指定できる。

img要素のsrcsetと同様に、picture要素のsrcset属性にも複数のファイルを指定できます。

<picture>
  <!-- 縦長画像に３種類のサイズを用意-->
  <source srcset="tate-image-small.jpg 400w, tate-image-medium.jpg 800w, tate-image.jpg" media="(orientation : portrait)" width="100" height="500">
  <source srcset="yoko-image.jpg" width="500" height="100">
  <img src="yoko-image.jpg" width="500" height="100" alt="">
</picture>