要約

picture要素とimg要素の画像選択機能を使用して、さまざまなデバイスに最適化された画像を提供します。

テクニック

例

例 1 — フォールバック画像を追加する
<picture>
   <source
        srcset="covers/9781449328030.avif"
        type="image/avif"/>
   <img
        src="covers/9781449328030.jpg"
        alt="Accessible EPUB 3 - First Edition"/> 
</picture>
例 2 — 白黒ディスプレイに最適化された画像を追加する
<picture>
   <source
        srcset="covers/9781449328030_bw.jpg"
        media="(monochrome)"/>
   <img
        src="covers/9781449328030_color.jpg"
        alt="Accessible EPUB 3 - First Edition"/>
</picture>
例3 — 異なるディスプレイ解像度に対応した画像を提供する
<img
     srcset="covers/9781449328030_small.jpg 1x,
             covers/9781449328030_large.jpg 2x"
     src="covers/9781449328030_small.jpg"
     alt="Accessible EPUB 3 - First Edition"/>

よくある質問

どの要素を使うかは重要ですか？

いいえ。picture 要素は表示要素ではありません。この要素は、子要素であるimgタグに他の画像を関連付ける機能を提供するだけです。選択した画像の実際のレンダリングはimg要素によって行われるため、使用するタグによってレンダリングが変わることはありません。

picture要素の利点の１つは、出版者がより複雑な選択基準を定義できることです。picture要素が良く使われるのは、その複数の子要素source要素によって選択基準の読み取りが容易になるためです。

解説

代替画像を提供することは、より一般的なユーザビリティの問題ですが、ユーザーのディスプレイに最適化された画像を提供することで、アクセシビリティにとって多くの副次的なメリットがあります。

たとえば、カラー ディスプレイ用に最適化された表紙画像は、モノクロ ディスプレイのデバイスでレンダリングすると判読できない場合があります。同様に、画面解像度に合わせて適切なサイズで最適化された画像を提供することで、視力の弱いユーザーを支援することができます。最適化された画像は、すべてのデバイスの表示能力に合わせて単一の画像を使用せざるを得ないことで発生するピクセル化の問題を回避するのに役立ちます。

次のセクションでは、 picture要素とimg要素の主な機能について簡単に説明します。これらの要素の詳細については、 「関連リンク」セクションのリソースを参照してください。

picture要素

picture要素はimg要素のラッパー（包摂要素）であり、追加の画像をそのタグに関連付けることができます。したがって、 picture要素には常に子img要素が必要です。

新しいpicture要素が認識されない場合でも、子のimg要素により、画像を表示できます。また、 img要素は、代替テキストや、必要に応じて拡張説明も提供できます。

表示される画像に関係なく、同じ代替テキストと説明が使用されるため、セット内の画像の違いは表示特性のみである必要があります（つまり、画像内の情報が異なってはなりません）。

ユーザーエージェントが表示できる代替画像は、子要素sourceで指定されます (例1と2を参照)。

各source要素で指定された画像の特性は、次の属性を使用して定義されます。

srcset

この属性が指定するのは、使用する画像への 1 つ以上の URL のリストです。

各画像 URL の後に幅記述子が続く場合もあります。

srcset="covers/small.jpg 480w, covers/large.jpg 960w"

またはピクセル密度の宣言が続きます。

srcset="covers/low_res.jpg 1x, covers/hi_res.jpg 2x"

幅記述子は、画像の幅をユーザー エージェントに伝え、ビューポートに最適に収まるかどうかを判断できるようにします。幅記述子を指定する場合は、 sizes属性も設定する必要があります。

ピクセル密度はディスプレイの解像度を指します。標準解像度の画面は 1 倍、Retina ディスプレイは 2 倍（ピクセル密度が 2 倍）、より新しい画面解像度は 3 倍や 4 倍の解像度にも達しています。

src属性は、picture要素のsource子要素では無効であることに注意してください。画像オプションが 1 つしかない場合でも、 srcsetで指定する必要があります。複数の画像を指定する場合は、 sizes属性を設定する必要があります。

type

画像のメディアタイプ。

type="image/jpeg"

source要素が異なるメディアタイプの複数の画像を参照する場合は、属性を設定しないでください。

media

画像を使用する条件を指定するメディアクエリー。

media="(monochrome)"
sizes

sizes属性は、画像の表示幅を指定します。各幅（最後の幅を除く）には、画像を使用する条件を指定するメディアクエリーを含めることができます。他の条件が適用されない場合は、最後に指定されたサイズがデフォルトになります。

たとえば、次の宣言では、最大画面幅が 480 ピクセルの場合、画像は画面幅全体を占めます。それより大きい場合は、画像は画面幅の半分だけを占めます。

sizes="(max-device-width: 480px) 100vw,
        50vw"

ユーザーエージェントは、デバイスに適用される幅を決定し、その情報を使用してsrcset属性から使用する最も適切な画像を計算します。

img要素

img要素はpicture要素と似ていますが、より基本的なオプション セットを提供します。つまり、 srcsetとsizes属性のみが許可されます。これらの属性はまったく同じように機能するため、詳細についてはpicture要素のセクションの定義を参照してください。

img要素は、 picture要素内で使用されるかどうかに関係なく、常にデフォルトの画像を含むsrc属性を指定する必要があります。この画像は、ユーザー エージェントがデバイスに適した画像を見つけられない場合、他のオプションが指定されていない場合、またはユーザー エージェントが画像の選択をサポートしていない場合に表示されます。

関連リンク