Web

【HTML】picture 要素について

投稿日:2019年4月11日 更新日:

1. <picture> 要素とは?

<picture> 要素を使うと、<img> 要素に対して複数の画像を指定することができるようになります。ブラウザはその中から適したものを1つだけ選択して、ダウンロード・表示することになります。
適したものがない場合は、<img> 要素の src 属性に指定された画像を利用します。

2. 仕様

3. <source> 要素

<img> 要素で利用される画像の候補を、<source> 要素で指定します。

<source> 要素の代表的な属性は以下です。

 
属性 説明
src
  • 画像ファイルへのパス(URL)を指定します。
type
  • 画像の種類を指定します。
srcset
  • type属性や media属性を指定している場合は、画像ファイルへのパス(URL)をこちらの属性に指定します(src属性ではなく)。
  • 画像ファイルへのパス(URL)に加えて、幅記述子も合わせて記述することができます(スペースで区切ります)。その場合は、sizes属性が必要です。
  • ピクセル密度記述子を指定してもエラーにはなりませんが、試したところ効果がない(?)ようでした。
sizes
  • srcset属性で幅記述子も指定している場合は、こちらの属性に画像のサイズを指定します。
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. デモ

デモページ

🔗 Picture 要素のテスト

メディアクエリーで場合分けしつつ、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>

8. 参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

SQLite

PHP から SQLite を使う手順

PHP から SQLite を使う手順について説明します。

HTTPレスポンスヘッダとブラウザキャッシュの関係を調査

目次1. はじめに2. 使用したツールWebサーバー側クライアント側3. 使用する HTML (PHP) ファイル4. 実験パターン1HTML (PHP)のヘッダ出力部分1回目のアクセス2回目のアクセ …

Web Programming

Webプログラミングのための Web入門

この記事では、Webプログラミングで必要になる Webの知識をご紹介します。 目次1. インターネット2. インターネットを土台として存在するプロトコル3. Web とは?4. URL5. HTML2 …

Web

インストールが可能になるための最低限のウェブサイト(PWA)を作る

インストールが可能になるための最低限のウェブサイト(PWA)を作る方法について説明します。

DokuWiki

DokuWiki のプラグイン開発に関する情報

DokuWiki をなるべくスマートにカスタマイズしようとすると(設定変更以上のことをやりたい場合です)、テンプレートかプラグインを自作せざるを得ません。他の方法があまり用意されていないためです。 テ …