Skip to content

Latest commit

 

History

History
164 lines (124 loc) · 7.48 KB

index.md

File metadata and controls

164 lines (124 loc) · 7.48 KB
title slug l10n
<picture>: 画像要素
Web/HTML/Element/picture
sourceCommit
942a529383ee7ee3996fb234187641c08935f3ff

{{HTMLSidebar}}

<picture> は HTML の要素で、0 個以上の {{HTMLElement("source")}} 要素と 1 つの {{HTMLElement("img")}} 要素を含み、様々な画面や端末の条件に応じた画像を提供します。

ブラウザーは複数の <source> 子要素を検討し、その中から最も適切なものを選択します。適切なものがない場合や、ブラウザーが <picture> 要素に対応してない場合、 <img> 要素の src 属性で指定された URL が選択されます。選択された画像は <img> 要素が占有する領域に表示されます。

{{InteractiveExample("HTML Demo: <picture>", "tabbed-standard")}}

<!--Change the browser window width to see the image change.-->

<picture>
  <source
    srcset="/shared-assets/images/examples/surfer.jpg"
    media="(orientation: portrait)" />
  <img src="/shared-assets/images/examples/painted-hand.jpg" alt="" />
</picture>

どの URL を読み込むかを選択するには、{{Glossary("user agent","ユーザーエージェント")}}はそれぞれの <source> 要素の srcset, media, type 属性を調べて、現在のページのレイアウトや表示装置の能力に最も合う画像を検討します。

<img> 要素は 2 つの役割を担います。

  1. 画像の寸法やその他の属性と、表示方法を記述します。
  2. <source> 要素で利用可能な画像を提供できなかった場合の代替策を提供します。

<picture> をよく使う場面は以下の通りです。

  • アートディレクション。様々な media の条件に合わせて画像を切り抜いたり変更したりする (例えば、小さな画面では、詳細すぎない、より簡単な版の画像を読み込むなど)。

  • 特定の形式に対応していないブラウザーに対して、代替画像形式を提供する。

    [!NOTE] 例えば、AVIF や WEBP と言った新しい形式には多くの利点がありますが、ブラウザーが対応していない可能性があります。対応している画像形式のリストは、画像ファイルの種類と形式ガイドにあります。

  • 見る人の画面に最も適合する画像を読み込むことで、通信帯域を節約しページの読み込みをより速くする。

DPI の高い（高解像度の）ディスプレイのために高解像度版の画像を提供する場合は、代わりに srcset 属性を <img> に使用してください。これによってブラウザーはデータ節約モードでは低解像度版を選択することができ、 media 条件を明示的に書かなくてもよくなります。

コンテンツカテゴリー フローコンテンツ, 記述コンテンツ, 埋め込みコンテンツ
許可されている内容 0 個以上の {{HTMLElement("source")}} 要素、その後に 1 個の {{HTMLElement("img")}} 要素、任意でスクリプト対応要素と混在。
タグの省略 なし。開始タグと終了タグの両方が必須です。
許可されている親要素 埋め込みコンテンツを含むことができるすべての要素。
暗黙の ARIA ロール 対応するロールなし
許可されている ARIA ロール 許可されている role なし
DOM インターフェイス {{domxref("HTMLPictureElement")}}

属性

この要素はグローバル属性のみを持ちます。

使用上のメモ

{{cssxref("object-position")}} プロパティを使用して、要素の枠内で画像の位置を調整したり、 {{cssxref("object-fit")}} プロパティを使用して、枠内に合わせるための画像の寸法を変更する方法を制御したりすることができます。

Note

これらのプロパティは <picture> 要素ではなく、子の <img> 要素に用いてください。

例

これらの例は、 {{HTMLElement("source")}} 要素の様々な属性がどのように <picture> 内の画像の選択を変更するかを示しています。

media 属性

media 属性はユーザーエージェントがそれぞれの {{HTMLElement("source")}} 要素を評価するメディア条件を（メディアクエリーと同様に）指定します。

{{HTMLElement("source")}} のメディア条件が false と評価された場合、その要素はスキップされ、<picture> 内の次の要素が評価されます。

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>

srcset 属性

srcset 属性は、寸法に基づいた利用可能な画像のリストを提供するために使用します。

これは画像記述子のカンマ区切りのリストで構成されます。それぞれの画像記述子は画像の URL と、次のいずれかで構成されます。

  • 幅記述子 に続いて w を書きます（300w など） または
  • ピクセル密度記述子 に続いて x を書き (2x など)、高 DPI 画面の高解像度画像を提供します。
<picture>
  <source srcset="logo-768.png, logo-768-1.5x.png 1.5x" />
  <img src="logo-320.png" alt="logo" />
</picture>

type 属性

type 属性は、 {{HTMLElement("source")}} 要素の srcset 属性で与えられるリソース URL の MIME タイプを指定します。ユーザーエージェントが指定されたタイプに対応していない場合、その {{HTMLElement("source")}} 要素はスキップされます。

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="photo" />
</picture>

仕様書

{{Specifications}}

ブラウザーの互換性

{{Compat}}

関連情報

  • {{HTMLElement("img")}} 要素
  • {{HTMLElement("source")}} 要素
  • フレーム内の画像の位置や寸法の設定: {{cssxref("object-position")}} および {{cssxref("object-fit")}}
  • 画像ファイルの種類と形式ガイド