【HTML Living Standard】source要素の使い方

sourceオブジェクトは、picture、audio、videoといったメディア要素に対して、一つまたは複数の代替メディアリソース（画像、音声、動画ファイル）を指定するオブジェクトです。このオブジェクトの主な目的は、ウェブブラウザや利用デバイスの特性（画面解像度、ネットワーク帯域幅、対応フォーマットなど）に応じて、最適なメディアファイルを柔軟に提供することにあります。

具体的には、picture要素内で使用することで、画面サイズやピクセル密度に応じて異なる解像度の画像を効率的に表示できます。また、audioやvideo要素内で複数のファイル形式（例: MP4, WebM, Ogg）を提供することにより、様々なブラウザが対応する形式を自動的に選択し、メディアの再生互換性を高めることが可能です。これにより、特定のブラウザや環境に依存せず、幅広いユーザーにコンテンツを提供できるようになります。

主要な属性としては、メディアリソースのURIを指定するsrc（audioやvideoの場合）や、レスポンシブな画像セットを定義するsrcset（pictureの場合）があります。さらに、メディアタイプを示すtype属性や、適用されるメディアクエリを定義するmedia属性、画像のサイズ情報を提供するsizes属性なども活用されます。これらの属性を適切に組み合わせることで、ウェブサイトの読み込みパフォーマンスを向上させ、ユーザーエクスペリエンスを最適化できます。

複数のsourceオブジェクトを定義することは、古いブラウザへのフォールバック対応や、ネットワーク速度が遅いユーザーへの配慮に繋がり、より堅牢でアクセスしやすいウェブコンテンツの提供に大きく貢献します。これにより、すべてのユーザーが自身の環境に合わせた最適な状態でメディアコンテンツを閲覧・視聴できるようになります。

Copy
1<source src="メディアファイルのURL" type="MIMEタイプ">

引数なし

引数はありません

戻り値なし

戻り値はありません