HTMLの<picture>タグと<source>タグ

HTMLの<picture>タグと<source>タグは、画像をより効果的に制御し、多様なメディアデバイスや画面サイズに応じて最適化された画像を提供するために使用される要素です。これらのタグは、レスポンシブウェブデザインや画像の最適化において非常に有用です。ここでは、<picture>タグおよび<source>タグの使い方について解説します。

HTMLが提供するレスポンシブ画像技術

昨今では、さまざまなデバイスでウェブを閲覧するため、レスポンシブウェブデザイン（Responsive web design）を実現する原理を理解し、適切に扱う技術を習得することが、ウェブデザインにおいて非常に重要な位置を占めるようになりました。

レスポンシブウェブデザインを実現する方法として代表的なのは、CSSを用いてレスポンシブデザインを構築する方法です。もちろん、JavaScriptの助けを借りることで、より洗練されたレスポンシブウェブデザインを実装することも可能です。もう一つの方法としては、HTMLが提供するレスポンシブ画像技術を利用することが挙げられます。この方法は、CSSを用いたレスポンシブウェブデザインの実装と組み合わせて使うことで効率的であり、レスポンシブウェブデザインを構築する技術の一部です。

HTMLが提供するレスポンシブ画像技術には、2種類あります。

  • <img>タグのsrcset属性とsizes属性を利用する方法
  • <picture>タグの<source>タグとsrcset属性、media属性、type属性の使い方

この文章では、<picture>タグの<source>タグとsrcset属性、media属性、type属性の使い方について解説します。

<picture>タグ

<picture>タグは、1つの<img>タグに対して複数のレスポンシブ画像を提供する0個以上の<source>タグを含むコンテナ（親要素）を意味します。

<picture>タグは、<source>タグを使ったレスポンシブ画像を利用することで、帯域幅の節約やページ読み込み時間の短縮を目的として使用されます。
ここでの<img>タグは、画像のウェブアクセシビリティやレスポンシブ画像の条件などにより、提供された<source>タグのいずれも使用可能な画像を提供できない場合に備えたフォールバック（代替）画像として使用されます。

ご注意ください！
<picture>タグは、その名前の意味であるpicture（写真）とは直接の関係はありません。1つの<img>タグに対して0個以上のレスポンシブ画像を提供する<source>タグの範囲を示すコンテナ（親要素）であるという意味だけです。

<picture>タグのコンテンツモデル

<picture>タグには、0個以上の<source>タグと1つの<img>タグを含めることができます。また、<source>タグと<img>タグの間には、スクリプトをサポートする要素（script-supporting要素）を含めることができます。script-supporting要素とは、<script>、<style>、<link>タグを指します

<picture>タグ自体は画面に何も表示しません。ただし、内部にレスポンシブ画像を提供する<source>タグがある場合、<source>タグのsrcset属性とmedia属性およびtype属性で設定されたレスポンシブ画像に適した画像ソースを選択する環境を提供する役割を果たします。<source>タグを使用する場合、srcset属性は必須ですが、media属性およびtype属性はオプションとして使用されます。 もし<source>タグが存在しない場合は、<img>タグを使い、src属性の値が画像ソースとして選択され、画面に表示されます。以下のサンプルコードで確認してみましょう。

HTML 
<picture>
    <source srcset="image-small.jpg" media="(max-width: 768px)">
    <source srcset="image-large.jpg" media="(min-width: 769px)">
    <img src="fallback-image.jpg" alt="An image">
    <!-- script-supporting要素（script、style、link）は任意で使用可能 -->
    <script src="image-script.js"></script>
</picture>

以下のコード例は、<picture>タグに<source>タグ、<img>タグ、そして<script>タグをすべて使用した例です。ブラウザはレスポンシブ画像の条件に合った<source>タグの画像を表示します。条件に適合する画像ソースがない場合は、<img>タグの画像ソースが表示されます。

<source>タグや<img>タグ、そしてscript-supporting要素はすべて任意で使用可能です。

しかし、<picture>タグ自体は画面に何も表示しないため、<source>タグと<img>タグのいずれかは必ず存在しなければなりません。<source>タグと<img>タグの両方を使用する場合、<img>タグは<source>タグより後に配置する必要があります。これは、レスポンシブ画像の条件などで提供された<source>タグのいずれも利用可能な画像を提供できない場合に、<img>タグの画像を表示するためです。もし<img>タグが<source>タグより先に配置されていると、ブラウザは<img>タグの画像を表示し、後に配置された<source>タグは無視されます。こうなると、<source>タグで設定したレスポンシブ画像が正しく機能しなくなります。

以下の例で確認してみましょう。

HTML 
<!-- imgタグは省略されています -->
<picture>
    <source srcset="image-small.jpg" media="(max-width: 768px)">
    <source srcset="image-large.jpg" media="(min-width: 769px)">
</picture>

上記の例では、&lt;img&gt;タグを省略していますが、これは可能です。
しかし、&lt;img&gt;タグを省略すると、視覚障害のあるユーザーは画像の内容を理解できなくなります。そのため、&lt;img&gt;タグの省略は推奨されません。もし視覚障害のあるユーザーにとって意味のないコンテンツであれば省略しても問題ありません（一部のスクリーンリーダーはこの要素を無視するため）が、一部のスクリーンリーダーには空の画像として認識され、混乱を招く可能性があります。

また、ブラウザがレスポンシブ画像の条件に合致する&lt;source&gt;タグの画像を見つけられない場合（srcset属性、media属性、type属性などの条件に合致しない場合を意味します）、画像を表示できなくなります。

&lt;img&gt;タグは2つの用途で使用されます。

  • ウェブアクセシビリティのためにalt属性を提供し、
  • レスポンシブ画像の条件などで指定された&lt;source&gt;タグのいずれも使用可能な画像を提供できない場合に備えたfallback画像として使用されます。

この用途を考慮すると&lt;img&gt;タグを必ずしも使用する必要はありませんが、&lt;img&gt;タグを常に使用することが推奨されます。

しかし、<picture>タグ内に<source>タグがなく、<img>タグだけで画像を表示する場合はどうでしょうか？それでも問題ありません。
ただし、この場合は<picture>タグを使用する目的である<source>タグを使ったレスポンシブ画像の実装ができなくなります。結果として、この場合は<picture>タグを使わずに<img>タグだけを使用すれば十分です。これは<picture>タグを使う理由（レスポンシブ画像の実装により帯域幅を節約し、ページの読み込み時間を短縮すること）に関する重要なポイントです。

HTML 
<!-- <code><img></code>タグのみを使用 -->
<picture>
    <img src="image.jpg" alt="An image">
</picture>

<source>タグ

<source>タグは、<picture>タグ内でレスポンシブ画像のソースを設定する要素です。複数使用する場合は、<source>タグのsrcset属性、media属性、およびtype属性でレスポンシブ画像を設定できます。ブラウザはこれらのレスポンシブ画像の条件に合致するものを表示します。

<video>タグ内で使用される<source>タグとは関連する属性が異なります。

<picture>タグ内で使用される<source>タグと、<video>タグ内で使用される<source>タグを混同しないでください。

注意してください！
<picture>タグ内で使用される<source>タグはsrcset属性で画像リソースを定義しますが、<video>タグ内で使用される<source>タグはsrc属性でビデオリソースを定義します。また、<picture>タグ内で使用される<source>タグはmedia属性を使用できますが、<video>タグ内で使用される<source>タグはmedia属性を使用できません。

media属性

ユーザーエージェント（ブラウザ）が各要素に対して評価するメディア条件（メディアクエリに類似）を指定します。

この条件に合致するとブラウザは、そのメディア条件に一致する<source>タグのsrcset属性に指定された画像リソースを表示し、<picture>タグ内の上下の順序にかかわらず、次に続く別の<source>タグや<img>タグがあってもそれらを無視します。条件に合致しない場合はスキップされ、内部の次の要素（存在する場合）を評価します。

HTML 
<picture>
    <source srcset="image-small.jpg" media="(max-width: 768px)">
    <source srcset="image-large.jpg" media="(min-width: 769px)">
    <img src="fallback-image.jpg" alt="An image">
</picture>

srcset属性

画像リソースを指定するための属性です。
<picture>タグ内で使用される<source>タグのsrcset属性は、<img>タグのsrcset属性と使用方法が同じです。 本記事ではsrcset属性の詳細な使い方については扱いません。詳しくは、以下のリンク先をご参照ください： HTML <img>タグの srcset 属性と sizes 属性のわかりやすい解説と使い方

type属性

この属性は、<source>タグのsrcset属性で指定された画像リソースのMIMEタイプ（MIME type）を指定します。指定されたMIMEタイプがブラウザでサポートされていない場合、その要素はスキップされます。

type属性は必ずしも指定する必要はありません。type属性が指定されていない場合、ブラウザは自動的にMIMEタイプ（MIME type）を判定します。ただし、type属性を指定すると、ブラウザはその属性値をもとに対応可否を判断するため、MIMEタイプを自動判定する処理時間を短縮できます。

HTML 
<picture>
    <source srcset="photo.avif" type="image/avif">
    <source srcset="photo.webp" type="image/webp">
    <img src="photo.jpg" alt="photo">
</picture>

ブラウザ互換性

pictureタグとsourceタグのブラウザ対応状況
タグ
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
<picture> 38 13 38 9.1
<source> 3 12 3.5 3.1

caniuse.comで詳しい情報をご確認ください。

sourceタグの属性に関するブラウザ対応状況
<source>タグの属性
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
srcset 38 18 38 9.1
media 3 12 15 3.1
type 3 12 3.5 3.1

caniuse.comで詳しい情報をご確認ください。

仕様書

picture 태그와 source 태그의 명세서
仕様書
picture HTML Standard
#the-picture-element
source HTML Standard
#the-source-element

参考資料

関連項目