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

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

関連記事

Web

インターネットの説明に欠けているもの?

 株式会社日本レジストリサービス(以下JPRS、本社:東京都千代田区、代表取締役社長 東田幸樹)は、インターネット教育の支援活動の一環として、全国の中学校・高校・高等専門学校を対象に、マンガ小冊子『ポ …

Web

Basic認証の設定手順

Basic認証の設定手順について説明します。

Web

CORS の プリフライト・リクエストを発生させて観察する

CORS の プリフライト・リクエストを発生させて観察するページを作成しました。

Chrome

Google Chrome 68 で、HTTPS非対応のマークが変わりました

目次1. Chrome 68 がリリース2. 以前のマーク3. Chrome 68 以降のマーク4. ついでに、https にしてアクセスしてみる5. おわりに 1. Chrome 68 がリリース …

Web

URLリダイレクトの動作

URLリダイレクトの動きについて説明します。