<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 の高い（高解像度の）ディスプレイのために高解像度版の画像を提供する場合は、代わりに srcset 属性を <img> に使用してください。これによってブラウザーはデータ節約モードでは低解像度版を選択することができ、 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 メディア特性