要約
picture
要素とimg
要素の画像選択機能を使用して、さまざまなデバイスに最適化された画像を提供します。
テクニック
-
代替画像を提供するには、
picture
要素の子であるsource
要素を使用します。 -
代替画像を提供するには、
img
要素のsrcset
属性を使用します。
例
よくある質問
- どの要素を使うかは重要ですか?
-
いいえ。
picture
要素は表示要素ではありません。この要素は、子要素であるimg
タグに他の画像を関連付ける機能を提供するだけです。選択した画像の実際のレンダリングはimg
要素によって行われるため、使用するタグによってレンダリングが変わることはありません。picture
要素の利点の1つは、出版者がより複雑な選択基準を定義できることです。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
属性を指定する必要があります。この画像は、ユーザー エージェントがデバイスに適した画像を見つけられない場合、他のオプションが指定されていない場合、またはユーザー エージェントが画像の選択をサポートしていない場合に表示されます。
関連リンク
- MDN — <img>: 画像埋め込み要素
- MDN — <picture>: 画像要素
- HTML —
img
要素 - HTML —
picture
要素