1. <picture> 要素とは?
<picture>
要素を使うと、<img>
要素に対して複数の画像を指定することができるようになります。ブラウザはその中から適したものを1つだけ選択して、ダウンロード・表示することになります。
適したものがない場合は、<img>
要素の src
属性に指定された画像を利用します。
2. 仕様
3. <source> 要素
<img>
要素で利用される画像の候補を、<source>
要素で指定します。
<source>
要素の代表的な属性は以下です。
属性 | 説明 |
---|---|
src |
|
type |
|
srcset |
|
sizes |
|
media |
|
4. 利用例
以下の例では、ブラウザが WebP 形式の画像に対応していれば foo.webp
がダウンロードされて表示されます。もし対応していなければ、foo.png
がダウンロードされ表示されます。
<picture>
<source srcset="foo.webp" type="image/webp" >
<img src="foo.png" alt="foo">
</picture>
5. 実際に使用された画像がどれかを JavaScript で取得する
<picture>
要素内の <img>
要素に実際に適用された画像ファイルURLは、<img>
要素の currentSrc
プロパティで取得することができます。
例えば、以下のHTMLがあったとします。
<picture>
<source srcset="foo.webp" type="image/webp" >
<img src="foo.png" alt="foo" id="my-img">
</picture>
この場合、実際に適用された画像のURLは以下の JavaScriptコードで取得できます。
window.addEventListener('load', () => {
const img = document.querySelector('#my-img');
console.log(img.currentSrc);
});
6. 注意点
<picture>: 画像要素 – HTML | MDN に以下の記述があります。
DPI の高い (高解像度の) ディスプレイのために高解像度版の画像を提供する場合は、代わりに srcset 属性を <img> に使用してください。これによってブラウザーはデータ節約モードでは低解像度版を選択することができ、 media 条件を明示的に書かなくてもよくなります。
ということですので、スマートフォンやRetinaディスプレイ向けに高解像度の画像を提供したい場合は、<img>
要素の srcset
属性を使いましょう。
7. デモ
デモページ
「メディアクエリーで場合分けしつつ、png形式画像 と webp形式画像を指定する」という実験もしています(可能でした)。そのHTMLコードをここにも載せておきます。
<picture>
<source type="image/webp"
media="(max-width:800px)"
sizes="200px"
srcset="c-100.webp 100w,
c-200.webp 200w,
c-300.webp 300w,
c-400.webp 400w">
<source type="image/webp"
sizes="400px"
srcset="c-100.webp 100w,
c-200.webp 200w,
c-300.webp 300w,
c-400.webp 400w">
<img srcset="c-100.png 100w,
c-200.png 200w,
c-300.png 300w,
c-400.png 400w"
sizes="(max-width:800px) 200px, 400px"
src="c-200.png"
alt="c-200">
</picture>