<source>: メディアまたは画像のソース要素

この要素にはグローバル属性があります。

type

画像の MIME メディア型またはその他のメディア型で、オプションで codecs 引数を伴います。

src

この source 要素の親が <audio> および <video> 要素の場合は必須ですが、source 要素の親が <picture> 要素である場合は指定できません。

メディアのリソースの場所です。

srcset

この source 要素の親が <picture> 要素である場合は必須ですが、source 要素の親が <audio> または <video> 要素の場合は指定できません。

1 つ以上の文字列をカンマ区切りで並べたリストであり、ブラウザーが使用できる画像のセットを示します。それぞれの文字列の構成は以下のとおりです。

1. 画像を指定する 1 つの URL
2. 幅記述子。これは正の整数に "w" を付加した文字列で、例えば 300w のようになります。指定しない場合の既定値は無限大です。
3. 画素密度記述子。これは直後に "x" を付加した正の浮動小数点数です。指定しない場合の既定値は 1x です。

有効であるためには、リスト内の各文字列は、少なくとも幅記述子またはピクセル密度記述子を持たなければなりません。2 種類の記述子が混在してはならず、リスト全体で一貫して一方のみを使用しなければなりません。リストの中で、各記述子の値は固有でなければなりません。ブラウザーは、指定された時点で表示するために最も適切な画像を選びます。sizes 属性が存在する場合は、各文字列に対して幅の記述子を指定しなければなりません。ブラウザーが srcset に対応していない場合は、src が既定値として使用されます。

sizes

この source 要素の親が <picture> 要素である場合は指定可能ですが、source 要素の親が <audio> または <video> 要素の場合は指定できません。

ソースの寸法のリストで、そのソースが表す画像が最終的に表示される幅を表します。それぞれのソースの寸法、条件と長さの組をカンマ区切りで並べたものです。この情報は srcset で指定された画像を使用する際に、ページのレイアウトを行う前にブラウザーが使用します。なお、 sizes は srcset でピクセル倍率ではなく幅指定子が提供された時（例えば 2x ではなく 200w の場合）のみ、効果があることに注意してください。

media

この source 要素の親が <picture> 要素である場合は指定可能ですが、source 要素の親が <audio> または <video> 要素の場合は指定できません。

リソースの志向するメディアのメディアクエリーです。

height

この source 要素の親が <picture> 要素である場合は指定可能ですが、source 要素の親が <audio> または <video> 要素の場合は指定できません。

画像の内在的な高さをピクセル単位で指定します。単位のない整数でなければなりません。

width

この source 要素の親が <picture> 要素である場合は指定可能ですが、source 要素の親が <audio> または <video> 要素の場合は指定できません。

画像の内在的な幅をピクセル単位で指定します。単位のない整数でなければなりません。

type 属性が指定されていない場合は、サーバーからメディア形式を取得して、ユーザーエージェントが扱うことができるものであるかどうかを確認します。表示できない場合は、次の <source> をチェックします。type 属性が指定された場合、ユーザーエージェントが表示できる形式と比較し、扱えないものであれば、サーバーはクエリーさえ行わず、次の <source> 要素をチェックします。

<picture> 要素のコンテキストで用いた場合、ブラウザーは提供されたすべての <source> を調べても使用する適切な画像が見つからなかった場合、<picture> 要素の子の <img> で指定した画像を使用するようフォールバックされます。

<source> 要素は空要素です。すなわち内容がないだけでなく、終了タグもありません。すなわち、 "</source>" は HTML の中で決して使われません。

ウェブブラウザーが対応している画像形式の詳細と、使用する適切な形式を選択するためのガイダンスについては、ウェブ上で使用する画像ファイルの種類と画像のガイドを参照してください。使用できる動画・音声メディアの種類については、ウェブ上で使用するメディアの種類と形式のガイドを参照してください。

次の例は、 Ogg 形式に対応したブラウザーと QuickTime 動画形式を再生可能な環境を想定した記述例です。 audio 要素や video 要素に対応していない場合、代わりにメッセージが表示されます。 audio 要素や video 要素には対応していても指定した形式のすべてが再生不可である場合は、 error イベントが発生し、（もしあれば）既定のメディアコントロールがエラーを示します。使用できるメディアファイル形式や、ブラウザーが対応しているメディアファイル形式の詳細については、ウェブ上のメディアの種類と形式についてのガイドを参照してください。

<video controls>
  <source src="foo.webm" type="video/webm" />
  <source src="foo.ogg" type="video/ogg" />
  <source src="foo.mov" type="video/quicktime" />
  I'm sorry; your browser doesn't support HTML video.
</video>

その他の例については、学習エリアの記事動画と音声のコンテンツにすばらしいリソースがあります。

この例では、2 つの <source> 要素が <picture> 内に含まれており、利用可能な空間の大きさがある幅を超えた時に使用する画像のバージョンを提供します。利用可能な幅がこれらの幅よりも小さい場合、ユーザーエージェントは <img> 要素で指定された代替画像を表示します。

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 800px)" />
  <source srcset="mdn-logo-medium.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN Web Docs" />
</picture>

<picture> 要素では、常に一つの <img> 要素をフォールバック画像として、 alt 属性をアクセシビリティのためにつける必要があります。 (画像が関係のない背景の装飾的な画像でない限り)。

この例では、height と width 属性を持つ 3 つの<source>要素が、<picture> 要素に含まれています。 メディアクエリーにより、ビューポートの寸法に基づいて、height および width 属性により表示すべき画像をブラウザーに選択させます。

<picture>
  <source
    srcset="landscape.png"
    media="(min-width: 1000px)"
    width="1000"
    height="400" />
  <source
    srcset="square.png"
    media="(min-width: 800px)"
    width="800"
    height="800" />
  <source
    srcset="portrait.png"
    media="(min-width: 600px)"
    width="600"
    height="800" />
  <img
    src="fallback.png"
    alt="Image used when the browser does not support the sources"
    width="500"
    height="400" />
</picture>

• ウェブ上のメディアの種類と形式のガイド
• 画像ファイルの型と形式のガイド
• <picture> 要素
• <audio> 要素
• <video> 要素
• ウェブパフォーマンス