HTML / Element

picture要素の使い方

HTMLのpicture要素は、画面の大きさや画像形式などの条件に合わせて、表示する画像の候補を選ぶための入れ物です。実際に画像を表示するのは、最後に置くimg要素です。

先に結論

pictureの中には、必要なsourceを先に置き、最後に必ずimgを置きます。ブラウザーは条件に合うsourceを探し、合わなければimgの画像を使います。

画像の候補を画面の幅や画素密度だけで変えたいなら、まずはimgのsrcsetとsizesを検討します。画像の切り抜きや形式を切り替えたいときにpictureが役立ちます。

最小例

<picture>
  <source media="(min-width: 48rem)" srcset="/images/hero-wide.jpg">
  <img src="/images/hero-narrow.jpg"
       alt="夕方の山と湖の風景"
       width="640"
       height="360">
</picture>

sourceには画像の候補と条件を書き、imgには最終的な画像とaltを書きます。picture自体は画像を表示しません。

実際に表示してみる

画面幅が広いときはsourceの横長画像、条件に合わないときはimgの画像が候補になります。ブラウザーの幅を変えて確認できます。

sourceの条件を使い分ける

指定	主な目的
`media`	画面幅、向き、色 schemeなどの条件で画像を切り替える
`type`	ブラウザーが対応できる画像形式の候補を示す
`srcset`・`sizes`	選ばれた候補の中から、表示幅や画素密度に合う画像を選ぶ

sourceを複数置く場合は、条件と順番を確認します。広い画面向けの候補を先に書いた場合、後ろの候補が使われる条件も意識しましょう。

pictureとimgの使い分け

したいこと	候補
1枚の画像を表示する	`img src`
同じ構図で、解像度の異なる候補を選ぶ	`img srcset sizes`
画面幅で切り抜きや構図を変える	`picture source media` + `img`
対応形式に応じて画像形式を変える	`picture source type` + `img`

altはimgに書く

pictureやsourceにaltを書くのではありません。画像の意味を伝えるaltは、最後のimgに書きます。装飾画像ならalt=""とし、画像が伝える意味を周囲の文章だけに任せないようにします。

よくある間違い

pictureの中にimgを置かず、画像が表示されると思い込む。
sourceやpictureにaltを書き、imgの代替テキストを省略する。
単なる解像度の候補選択に、複雑なmedia条件を増やす。
画像形式の候補を追加しただけで、各形式の代替画像や実際の対応状況を確認しない。
画像を切り替えても、どの候補でも意味が伝わるaltと周囲の説明を用意しない。

Atlasで詳しく確認する

pictureのcontent model、source selection、media・type・srcset・sizesの関係、imgのfallback、アクセシビリティ、実装Evidenceは、Yugien Atlasのpicture要素ページで詳しく整理しています。sourceの親要素別の属性条件はsource要素の使い方とAtlasのsource要素、画像の候補選択はAtlasのimg要素も参照してください。