<picture> 画像要素

試してみましょう

<!--ブラウザーウィンドウの幅を変更すると、画像が変化します。-->

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

属性

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

使用上のメモ

どの URL を読み込むかを決めるため、ユーザーエージェントはそれぞれの <source> 要素の srcset、media、type 属性を調べ、現在のレイアウトや表示装置の機能に最も合う、対応可能な画像を選択します。

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

1. 画像の寸法やその他の属性と、その表示方法を記述します。
2. どの <source> 要素からも使用可能な画像を取得できない場合の代替を提供します。

<picture> は、次のような場合によく使用されます。

• アートディレクション。media 条件に応じて画像を切り抜いたり変更したりします（例えば、小さな画面では、細部が多すぎない簡略版の画像を読み込みます）。

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

  メモ: 例えば、AVIF や WebP などの新しい形式には多くの利点がありますが、ブラウザーが対応していない場合があります。対応している画像形式の一覧は、画像ファイルの種類と形式ガイドを参照してください。

• 閲覧者の画面に最も適した画像を読み込むことで、通信量を抑え、ページの読み込みを速くする。

高 DPI (Retina) ディスプレイ向けに高密度版の画像を提供する場合は、代わりに <img> 要素で srcset を使用してください。これにより、ブラウザーはデータ節約モードで低密度版を選択でき、明示的な media 条件を書く必要もありません。

object-position プロパティを使用して要素の枠内で画像の位置を調整し、object-fit プロパティを使用して枠に合わせて画像を拡大縮小する方法を制御できます。

例

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

media 属性

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

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

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

prefers-color-scheme メディア機能を使用して、明るいテーマと暗いテーマで画像資産を差し替えることができます：

<picture>
  <source srcset="logo-dark.png" media="(prefers-color-scheme: dark)" />
  <source srcset="logo-light.png" media="(prefers-color-scheme: light)" />
  <img src="logo-light.png" alt="Product logo" />
</picture>

srcset 属性

srcset 属性は、サイズや表示装置のピクセル密度に基づいて、利用可能な画像のリストを提供するために使用されます。

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

• 幅記述子 に続いて w を書きます（300w など） または
• ピクセル密度記述子 に続いて x を書き (2x など)、高 DPI 画面の高解像度画像を提供します。

次の点に注意してください。

• 幅とピクセル密度の記述子は併用すべきではありません
• ピクセル密度記述子がない場合は 1x を意味します
• 重複する記述子の値は許可されません（2x と 2x、100w と 100w）

次の例は、高密度解像度と標準解像度の画像を指定するために、srcset 属性と <source> 要素を組み合わせた使用法を示しています。

<picture>
  <source srcset="logo.png, logo-1.5x.png 1.5x" />
  <img src="logo.png" alt="MDN Web Docs ロゴ" height="320" width="320" />
</picture>

srcset 属性は <picture> 要素を必要とせずに <img> 要素でも使用することができます。次の例は、srcset 属性を使用して標準解像度画像と高密度画像をそれぞれ指定する方法を示しています。

<img
  srcset="logo.png, logo-2x.png 2x"
  src="logo.png"
  height="320"
  width="320"
  alt="MDN Web Docs ロゴ" />

sizes 属性

<source> 要素の sizes 属性は、メディア条件と長さのペアのセットを指定し、それぞれの条件における画像の表示サイズを示すことができます。これにより、ブラウザーは画像の内在の幅が含まれている srcset 属性から最適な画像を選択できるようになります。

ブラウザーは画像をダウンロードする前に、sizes 属性内のメディア条件を評価します。情報は <img> 要素および <source> 要素の sizes 属性をご覧ください。

例を示します。

<picture>
  <source
    srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
    sizes="(max-width: 600px) 400px, 800px"
    type="image/jpeg" />
  <img src="fallback.jpg" alt="画像の例" />
</picture>

この例の中では、

• ビューポートの幅が 600px 以下の場合、スロットのサイズは 400px です。それ以外の場合は 800px です。
• ブラウザーはスロットサイズに端末ピクセル比率を乗算して理想的な画像幅を決定し、srcset から最も近い利用できる画像を選択します。

sizes が指定されていない場合、ブラウザーは画像のピクセル単位のサイズで指定されたデフォルトサイズを使用します。これは、特に様々な画面サイズや様々なコンテキストで画像が表示される場合、すべての端末に最適な表示とは限りません。

サイズ指定は、srcset でピクセル比率値の代わりに幅の記述子（例えば 2x ではなく 200w）が指定されている場合にのみ効果を発揮することに注意してください。 srcset を使用する方法の詳細については、レスポンシブ画像のドキュメントを参照してください。

type 属性

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

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

技術的概要

仕様書

ブラウザーの互換性

関連情報

• <img> 要素
• <source> 要素
• フレーム内の画像の位置や寸法の設定: object-position および object-fit
• 画像ファイルの種類と形式ガイド
• prefers-color-scheme メディア特性