HTML5のpicture要素は表示条件ごとにsourceを選びimg要素を残す

画面幅に応じて画像の構図を切り替えるなら、picture要素の中へ、条件付きのsource要素と一つのimg要素を置きます。sourceにはsrcsetで画像候補を示し、mediaで表示条件を指定します。最後のimgは省きません。

picture要素は、同じ画像をCSSで縮小するためだけの要素ではありません。狭い画面では主題へ寄った画像、広い画面では周囲を含む画像というように、伝える内容を保ちながら構図を変える場面で使います。

picture要素にはsourceの後へimg要素を置く

W3CのHTML 5.1 Working Draftにあるpicture要素は、複数の画像候補を内部のimg要素へ提供するcontainerです。画面のpixel density、viewport size、画像形式などを基に、利用する画像を選べます。

pictureの中には、sourceを0個以上置き、その後へ一つのimg要素を置きます。picture要素自体が画像を表示するのではなく、内部のimg要素が選ばれた画像を表示します。

次は説明用の仮例です。狭い画面では商品へ寄った画像、広い画面では周囲を含む画像を表示します。

<picture>
  <source
    media="(max-width: 480px)"
    srcset="/images/product-close.jpg">
  <img
    src="/images/product-wide.jpg"
    alt="木製の机に置いた黒い卓上時計">
</picture>

画面幅が480px以下なら、最初のsourceが候補になります。それ以外では、imgのsrcに指定した画像が候補になります。

source要素ではsrcではなくsrcsetを使う

picture内のsource要素には、srcset属性が必要です。動画や音声のsource要素と形が似ていますが、picture内ではsrc属性を使いません。

<!-- picture内では使わない -->
<source src="/images/product-close.jpg">

<!-- 画像候補はsrcsetへ書く -->
<source
  media="(max-width: 480px)"
  srcset="/images/product-close.jpg">

mediaには有効なmedia queryを書きます。typeを使う場合は画像のMIME typeを示し、user agentが対応していない形式なら次のsourceを検討できるようにします。

source要素は、それ自体では何も表示しません。画像の代替文、幅、高さ、classなど、表示する画像に共通する情報はimg側へ置きます。

sourceは具体的な条件から順に並べる

user agentは、pictureの子要素を順に確認し、srcsetがあり、mediaが環境に合い、typeが対応可能なsourceを選びます。複数の条件が同時に一致する書き方では、先にある候補が使われるため、順序が判断になります。

max-widthで分けるなら、狭い条件から並べます。

<picture>
  <source
    media="(max-width: 480px)"
    srcset="/images/product-small.jpg">
  <source
    media="(max-width: 800px)"
    srcset="/images/product-medium.jpg">
  <img
    src="/images/product-large.jpg"
    alt="木製の机に置いた黒い卓上時計">
</picture>

480px以下では、480pxの条件と800pxの条件がどちらも一致します。先に狭い画面用のsourceを置くことで、意図した候補を先に選べます。

条件を増やすほど管理する画像も増えます。構図を変える理由がない幅まで細かく分けず、主題が切れる、説明文字が読めない、横長の余白が大きすぎるなど、画像を変える必要がある境界だけを使います。

構図の切り替えと解像度の選択を分ける

同じ構図の画像について、pixel densityや表示幅に応じた候補を出すだけなら、img要素のsrcsetとsizesで対応できます。pictureを使う主な理由は、条件ごとに別のsource setを用意し、構図や画像形式を選べることです。

手段を先に決めず、画像で何を伝え、どの条件で読みにくくなるかを確認します。CSSで十分な画像まで複数作れば、制作時間と更新対象だけが増えます。

altは選ばれる画像に共通する内容を書く

代替文は、各sourceではなくimgのalt属性へ書きます。狭い画面用と広い画面用で構図が違っても、同じaltで内容を説明できる画像を一つのpictureへまとめます。

たとえば、広い画像には机全体、狭い画像には卓上時計だけが写っていても、ページ上の役割が商品の時計を示すことなら、時計を説明する代替文にします。片方だけに別の商品や重要な文字が含まれるなら、単なる構図違いではありません。画像の組合せまたは周囲の本文を見直してください。

imgのsrcは、pictureを解釈しないuser agentでも使える画像として選びます。最小または最大の画像を機械的に選ばず、ページの主題が欠けない候補を置きます。

対象画面で選択結果と内容を確認する

実装後は、HTMLの記述だけで終えず、対象とする画面幅とbrowserで次を確認します。

1. 各境界の直前と直後で意図した画像が選ばれるか。
2. sourceを使わない条件でimgの画像が表示されるか。
3. 主題が切れず、周囲の文章と同じ内容を伝えるか。
4. 画像の表示寸法がCSSで崩れていないか。
5. 画像を表示できない状態でもaltが内容を補えるか。

対応browser、画像の制作、HTMLの実装を外部へ委託しても、どの画面幅でどの構図を見せるか、画像の正本をどこへ保管するかは事業者側でも確認できるようにします。画像を作った人だけが切り替え条件を知る状態では、差し替え時に同じ構図を維持できません。

最初の一手は、現在の画像を狭い画面で表示し、主題が小さくなりすぎる一枚を選ぶことです。必要な構図を二つに絞り、source一つとimg一つで切り替えを確認してください。