この記事の要点

<source> は <picture> / <video> / <audio> の中で、複数のメディアソースを並べてブラウザに最適なものを選ばせるための要素 type 属性（MIME type）でブラウザは対応可否を判定し、最初に再生可能なものを採用する media 属性（メディアクエリ）で、ビューポート幅に応じて画像を出し分ける（picture 用途） srcset + sizes で解像度別の画像を切り替え、Retina 対応・通信量削減ができる 空要素なので閉じタグは不要。src / type / media / srcset / sizes が主な属性

source 要素とは

<source> は HTML5 で導入されたメディアソース指定用の空要素です。画像 (<picture>)、動画 (<video>)、音声 (<audio>) の中に複数の <source> を並べることで、ブラウザが環境に最適なフォーマットや解像度を自動選択できるようになります。

同じ動画を MP4 / WebM の両方で配信したい、画像を WebP に対応ブラウザだけ送りたい、ビューポート幅で別画像を出したい、といったフォールバック / 出し分けすべての起点になる要素です。

使う場所

親要素	主な用途
<picture>	WebP / AVIF へのフォールバック、アートディレクション、レスポンシブ画像
<video>	MP4 / WebM / OGG など複数フォーマットの並列指定
<audio>	MP3 / OGG / AAC など複数フォーマットの並列指定

主な属性

属性	意味
src	メディアファイルの URL（video / audio で使用）
srcset	解像度違いの画像 URL リスト（picture / 画像で使用）
type	MIME type（例: video/mp4, image/webp）
media	メディアクエリ。picture で出し分けに使う
sizes	ビューポート幅ごとの画像表示サイズの指針
width / height	レイアウトシフト防止用の寸法ヒント

1. picture での WebP フォールバック

WebP / AVIF に対応していないブラウザには PNG / JPEG を返す、定番パターンです。上から順に評価され、最初に対応できたものが採用されるため並び順が重要です。

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="ヒーローイメージ" width="1200" height="600">
</picture>

2. picture でアートディレクション

スマホでは縦長、PC では横長の別画像を出し分ける場合に media 属性を使います。

<picture>
  <source media="(max-width: 480px)" srcset="hero-mobile.jpg">
  <source media="(max-width: 1024px)" srcset="hero-tablet.jpg">
  <img src="hero-desktop.jpg" alt="ヒーローイメージ">
</picture>

3. レスポンシブ画像（srcset + sizes）

解像度違いの画像を用意し、ビューポート幅に応じて最適なものを取得させます。Retina 環境でも適切なサイズが選ばれ、通信量を削減できます。

<picture>
  <source
    type="image/webp"
    srcset="card-400.webp 400w,
            card-800.webp 800w,
            card-1200.webp 1200w"
    sizes="(max-width: 600px) 100vw, 50vw">
  <img
    src="card-800.jpg"
    srcset="card-400.jpg 400w, card-800.jpg 800w, card-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw, 50vw"
    alt="カード画像">
</picture>

4. video で複数フォーマット指定

<video controls width="640" poster="thumb.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4"  type="video/mp4">
  <p>お使いのブラウザは動画再生に対応していません。
     <a href="movie.mp4">こちらから動画をダウンロード</a>してください。</p>
</video>

5. audio で複数フォーマット指定

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  お使いのブラウザは音声再生に対応していません。
</audio>

type 属性に書く MIME タイプの例

用途	MIME タイプ
画像 WebP	image/webp
画像 AVIF	image/avif
動画 MP4 (H.264)	video/mp4; codecs="avc1.42E01E, mp4a.40.2"
動画 WebM	video/webm
音声 MP3	audio/mpeg
音声 OGG Vorbis	audio/ogg

注意点

• 並び順が評価順。新しいフォーマットを上、レガシーを下に書く
• picture 内では最後に必ず <img> を置く（フォールバック兼アクセシビリティ用）
• video / audio でもフォールバックテキストを書いておくと、再生不能環境で代替案を提示できる
• type 属性を正しく書いておくと、ブラウザはダウンロードせず判定できるので転送量を節約できる
• SEO 観点でも alt と適切な MIME タイプの指定は重要

関連記事

• opacity プロパティ
• animation-fill-mode プロパティ