HTML <picture>

<picture>は画像のセットを表すHTMLタグである。Webブラウザに応じて画像フォーマットを使い分けることができる。

構文

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。picture要素の終了タグは省略できない。

<picture>
  <!-- Zero or more source elements, followed by one img element -->
</pictur>

コンテンツモデル

picture要素の開始タグと終了タグの間には、以下に示す順番で要素が出現する。

０個以上の source 要素
１個の img 要素
０個以上の script またはtemplate要素

ウェブブラウザが複数の画像形式に対応している場合、先に出現する source 要素が優先される。

<picture>
  <!-- AVIFに対応しているブラウザではAVIF画像を表示する -->
  <source srcset="/images/example.avif" type="image/avif">
  <!-- AVIFに対応していないブラウザではWebP画像を表示する -->
  <source srcset="/images/example.webp" type="image/webp">
  <!-- どちらにも対応していないブラウザではJPEG画像を表示する -->
  <img src="/images/example.jpg">
</picture>

属性

以下に示す属性をpicture要素に指定できる。

accesskey: アクセスキー
class: CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
data-*: カスタムデータ属性を指定する。カスタムデータ属性とは、JavaScript から要素独自の属性を読み取るための仕組みである。
id: HTML文書内で一意な識別子を指定する。
lang: 言語を指定する。
style: CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。
title: ツールチップに適切な、要素のためのアドバイザリ情報を指定する。

JavaScript

JavaScriptからは HTMLPictureElement インタフェースを通じてpicture要素へアクセスできる。

HTMLElementインタフェースのプロパティ
プロパティ	型	説明
accessKey	string	accessKey属性
accessKeyLabel	string	要素に割り当てられたアクセスキー（読取り専用）
contentEditable	string	contenteditable属性
isContentEditable	boolean	この要素が編集できるかどうか（読取り専用）
dataset	DOMStringMap	カスタムデータ属性
dir	string	dir属性
draggable	boolean	draggable属性
innerText	string	ノードに描画されるテキスト
lang	string	lang属性
style	string	style属性
tabIndex	number	tabIndex属性
title	string	title属性

AMPの <amp-img> タグ

HTMLの <img> タグ

HTMLの <source> タグ

参考文献

Web Hypertext Application Technology Working Group (2022) Embedded content HTML Living Standard

HTML <picture>

構文

コンテンツモデル

属性

JavaScript

関連記事

参考文献