【HTML】picture 要素について

1. <picture> 要素とは？

<picture> 要素を使うと、<img> 要素に対して複数の画像を指定することができるようになります。ブラウザはその中から適したものを1つだけ選択して、ダウンロード・表示することになります。
適したものがない場合は、<img> 要素の src 属性に指定された画像を利用します。

2. 仕様

• 4.8 Embedded content | HTML Standard

3. <source> 要素

<img> 要素で利用される画像の候補を、<source> 要素で指定します。

<source> 要素の代表的な属性は以下です。

属性	説明
src	画像ファイルへのパス（URL)を指定します。
type	画像の種類を指定します。
srcset	type属性や media属性を指定している場合は、画像ファイルへのパス（URL)をこちらの属性に指定します（src属性ではなく）。 画像ファイルへのパス（URL）に加えて、幅記述子も合わせて記述することができます（スペースで区切ります）。その場合は、sizes属性が必要です。 ピクセル密度記述子を指定してもエラーにはなりませんが、試したところ効果がない（？）ようでした。
sizes	srcset属性で幅記述子も指定している場合は、こちらの属性に画像のサイズを指定します。
media	メディアクエリーを記述することで、画像を表示する条件を指定します。

4. 利用例

以下の例では、ブラウザが WebP 形式の画像に対応していれば foo.webp がダウンロードされて表示されます。もし対応していなければ、foo.png がダウンロードされ表示されます。

<picture>
  <source srcset="foo.webp" type="image/webp" >
  <img src="foo.png" alt="foo">
</picture>

5. 実際に使用された画像がどれかを JavaScript で取得する

<picture>要素内の <img>要素に実際に適用された画像ファイルURLは、<img>要素の currentSrcプロパティで取得することができます。

例えば、以下のHTMLがあったとします。

<picture>
  <source srcset="foo.webp" type="image/webp" >
  <img src="foo.png" alt="foo" id="my-img">
</picture>

この場合、実際に適用された画像のURLは以下の JavaScriptコードで取得できます。

window.addEventListener('load', () => {
  const img = document.querySelector('#my-img');
  console.log(img.currentSrc);
});

6. 注意点

<picture>: 画像要素 – HTML | MDN に以下の記述があります。

DPI の高い (高解像度の) ディスプレイのために高解像度版の画像を提供する場合は、代わりに srcset 属性を <img> に使用してください。これによってブラウザーはデータ節約モードでは低解像度版を選択することができ、 media 条件を明示的に書かなくてもよくなります。

ということですので、スマートフォンやRetinaディスプレイ向けに高解像度の画像を提供したい場合は、<img> 要素の srcset 属性を使いましょう。

7. デモ

「メディアクエリーで場合分けしつつ、png形式画像 と webp形式画像を指定する」という実験もしています（可能でした）。そのHTMLコードをここにも載せておきます。

<picture>
  <source type="image/webp"
          media="(max-width:800px)"
          sizes="200px"
          srcset="c-100.webp 100w,
                  c-200.webp 200w,
                  c-300.webp 300w,
                  c-400.webp 400w">
  <source type="image/webp"
          sizes="400px"
          srcset="c-100.webp 100w,
                  c-200.webp 200w,
                  c-300.webp 300w,
                  c-400.webp 400w">
  <img srcset="c-100.png 100w,
               c-200.png 200w,
               c-300.png 300w,
               c-400.png 400w"
    sizes="(max-width:800px) 200px, 400px"
    src="c-200.png"
    alt="c-200">
</picture>

8. 参考

• 4.8 Embedded content | HTML Standard
• <picture> 要素 – HTML | MDN