＜picture要素＞ - 画像の振り分け

公開日: 2017/02/09

picture要素は、画像を振り分ける要素です。複数のソースを用意して、その中から条件に合った1つの画像だけを表示できます。この要素を利用して、例えば、webpフォーマットに対応しているブラウザにはwebpを、対応してないブラウザにはpngを、といった振り分けが可能になります。

概要

名前: picture
カテゴリー: Flow content; Phrasing content; Embedded content
配置できる場所: Embedded contentが期待される場所。
コンテンツモデル: 0個以上のsource要素と、それに続く1つのimg要素。
タグの省略: 開始タグも終了タグも省略できません。
DOM Interface: HTMLPictureElement
仕様書: https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

基本的な使い方

picture要素を使うと、img要素のソースを複数、用意できます。picture要素の中にはimg要素を1つ配置して下さい。これが基本のソースとなります。その直前に、基本となるソースを除いた、他のソースを任意の数だけ、source要素で配置して下さい。URLはsrcsetで指定する点にご注意下さい。ブラウザは先頭から順に確認していき、表示できる画像が見つかった時点でそれを表示し、以降のソースを無視します。

HTML

<picture>
	<!-- 基本のソースを除いた、1個以上のソース -->
	<source srcset="./1.png">
	<source srcset="./2.png">
	<source srcset="./3.png">
	<source srcset="./4.png">

	<!-- 基本のソース -->
	<img src="./image.png">
</picture>

条件付け

type属性

picture要素の典型的な使い方として、ブラウザがwebpフォーマットに対応していたらwebpを、対応していなかったらpng(またはjpg)を表示する、という振り分けがあります。フォーマットに対応しているかどうかを確認させるには、source要素のtype属性に、MIMEタイプを指定して下さい。

HTML

<p>webpに対応していたら<a href="./image.webp">image.webp</a>を、対応してなかったら<a href="image.png">image.png</a>を表示します。</p>

<picture>
	<!-- 基本のソースを除いた、1個以上のソース -->
	<source srcset="./image.webp" type="image/webp">

	<!-- 基本のソースとなるimg要素 -->
	<img src="./image.png">
</picture>

デモを開く

media属性

source要素のmedia属性にメディアクエリを指定すると、そのメディアクエリの条件に合う場合に、そのソースを表示することができます。下記は、画面幅が700px以上だったら700.jpgを、そうではなく500px以上だったら500.jpgを、そうではなく250px以上だったら250.jpgを、どれでもなかったらimage.pngを、という条件付けをした例です。

HTML

<picture>
	<!-- 基本のソースを除いた、1個以上のソース -->
	<source srcset="./700.jpg" media="(min-width: 700px)">
	<source srcset="./500.jpg" media="(min-width: 500px)">
	<source srcset="./250.jpg" media="(min-width: 250px)">

	<!-- 基本のソースとなるimg要素 -->
	<img src="./image.png">
</picture>

Reload
Open

この例では分かりやすいようにあえて別の写真を振り分けています。実際の使い方としては例えば、同じ写真をサイズ別に複数用意して、画面幅の大きい端末には大きいサイズの写真を、小さい端末には小さいサイズの写真を振り分ける、というのがあります。ページ表示の高速化や、転送量の節約を実現できるでしょう。なお、メディアクエリはウィンドウをリサイズするごとに評価され直します。

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜picture要素＞ - 画像の振り分け</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/picture/">
		<style>
			body {
				background-color: #fff ;
			}

			picture, img {
				max-width: 80% ;
			}
		</style>
	</head>
	<body>

<p>picture要素は、画像を条件で振り分けられる要素です。</p>

<p>webpに対応していたら<a href="./image.webp">image.webp</a>を、対応してなかったら<a href="image.png">image.png</a>を表示します。</p>

<picture>
	<!-- 基本のソースを除いた、1個以上のソース -->
	<source srcset="./image.webp" type="image/webp">

	<!-- 基本のソースとなるimg要素 -->
	<img src="./image.png">
</picture>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/630/"> <meta charset="utf-8"> <title>【デモ】＜picture要素＞ - 画像の振り分け</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/picture/"> </head> <body>

<p>picture要素は、画像を条件で振り分けられる要素です。</p> <p>webpに対応していたら<a href="./image.webp">image.webp</a>を、対応してなかったら<a href="image.png">image.png</a>を表示します。</p> <picture>  <source srcset="./image.webp" type="image/webp">  <img src="./image.png"> </picture>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; } picture, img { max-width: 80% ; }

</style>

</script>