source要素の使い方

source要素は、画像や音声・動画について「この条件なら、このファイルを候補にしてね」とブラウザーへ伝えます。source自身が画像を表示したり、音声を再生したりするわけではありません。

先に結論

画像の候補を選ぶ

pictureは画像の候補をまとめる入れ物です。画像を表示するのは最後のimgで、画像の説明であるaltもそこに書きます。

<picture>
  <source media="(min-width: 48rem)"
          srcset="/images/landscape-wide.jpg">
  <img src="/images/landscape-narrow.jpg"
       alt="山と湖の風景" width="640" height="360">
</picture>

画面幅の条件に合えばsourceの画像が候補になります。条件に合うsourceがなければ、imgの画像が候補です。sourceにはsrcsetを、imgにはsrcとaltを書きます。

音声・動画の候補を選ぶ

audioやvideoでは、複数のメディアファイルをsourceで並べられます。typeにはファイル形式を表すMIME typeを書きます。

<video controls width="640" height="360">
  <source src="/media/lesson.webm" type="video/webm">
  <source src="/media/lesson.mp4" type="video/mp4">
  <track kind="captions" src="/media/lesson.ja.vtt"
         srclang="ja" label="日本語の字幕">
</video>

ブラウザーは候補の形式や再生環境を見て、使えるものを選びます。typeは形式の手がかりで、ファイルが正しいことや、実際に再生できることまで保証するものではありません。形式やコーデックによって対応状況が異なることがあります。

画像とメディアで属性が違う

親要素	sourceに書く属性	最後に使うもの
picture	srcset、必要に応じてmedia・type・sizes	imgが画像を表示し、altを持つ
audio・video	src、必要に応じてtype・media	親要素が音声・動画を再生する

pictureのsourceにsrcは使いません。逆に、audio・videoのsourceではsrcを使い、画像用のsrcsetやsizesは使いません。

mediaとtypeの役割

• mediaは、画面幅や向きなど、どんな環境で候補を使うかを指定します。
• typeは、画像やメディアの形式を示します。対応していない形式の候補を飛ばす判断に使われます。
• srcsetとsizesは、picture内の画像候補を指定するときに使います。

mediaに合う候補が複数あると、書いた順番も選択に関係します。候補を追加しただけで、すべてのブラウザーや端末で同じファイルが選ばれるとは限りません。

よくある間違い

• sourceだけを書き、画像を表示するimgをpictureの最後に置かない。
• picture内のsourceにsrcを書いてしまう。画像候補にはsrcsetを使います。
• audioやvideo内のsourceにsrcsetを書いてしまう。メディア候補にはsrcを使います。
• 画像の説明をsourceに書く。altはimgに書きます。
• typeを書けば、ファイルが壊れていても再生できると思い込む。
• audioやvideo自身にsrcがあるのに、子sourceが候補一覧になると思い込む。

Atlasで詳しく確認する

sourceの親要素ごとの属性条件、画像とメディアの選択アルゴリズム、候補の順序、DOM API、仕様と実装Evidenceは、Yugien Atlasのsource要素ページで確認できます。画像の表示はpictureとimg、メディア再生はaudioとvideoも参照してください。