HTML Living Standard/picture

picture 要素

<picture> 要素は、異なる解像度や画面サイズに応じた画像を提供するために使用されます。この要素は、レスポンシブデザインをサポートするための重要な要素で、異なる条件下で最適な画像を選択するために使用されます。複数の画像ソースを指定することができ、ブラウザが最適な画像を選択して表示します。

カテゴリ

フローコンテンツ
メタデータコンテンツ
画像を表示するコンテンツ

使用される文脈

フローコンテンツが期待される場所
画像コンテンツが期待される場所

コンテンツモデル

<picture> 要素は、以下の内容を含むことができます：

<source> 要素（異なる条件に基づいた画像ソースの指定）
<img> 要素（デフォルトの画像ソース）

タグの省略

<picture> 要素は省略不可能なタグです。開始タグと終了タグを必ず記述する必要があります。

属性

<picture> 要素には特定の属性はありませんが、内部に配置する <source> 要素や <img> 要素がいくつかの属性を持ちます。

<picture> 要素内の各 <source> 要素と <img> 要素には以下のような属性があります：

グローバル属性 — すべてのHTML要素に共通の属性（id, class, style など）。
media（<source> 要素） — メディアクエリの条件を指定します。これにより、異なる画面サイズや解像度に基づいて異なる画像を表示できます。
srcset（<source> 要素） — 画像のセットを指定し、ブラウザが最適な画像を選択できるようにします。例えば、異なる解像度の画像を指定できます。
sizes（<source> 要素） — srcset に基づいた画像の表示サイズを指定します。
src（<img> 要素） — デフォルトの画像のソースを指定します。<source> 要素の条件が満たされない場合に表示される画像です。
alt（<img> 要素） — 画像の代替テキストを指定します。視覚的に画像を確認できない場合に表示されるテキストです。
loading（<img> 要素） — 画像の読み込み方法を制御します。lazy（遅延読み込み）を指定することで、画像の読み込みを遅延させ、ページのパフォーマンスを向上させることができます。

使用例

基本的な使用例

以下の例では、画面の解像度や表示サイズに基づいて異なる画像を表示します。

<picture>
  <source media="(min-width: 650px)" srcset="image-large.jpg">
  <source media="(min-width: 465px)" srcset="image-medium.jpg">
  <img src="image-small.jpg" alt="A sample image">
</picture>

この例では、<picture> 要素内に複数の <source> 要素があり、それぞれ異なる画面幅に基づいて異なる画像を提供しています。画面の幅が650ピクセル以上の場合には image-large.jpg が使用され、465ピクセル以上の場合には image-medium.jpg が使用され、それ以外の場合には image-small.jpg が使用されます。

srcset と sizes を使った高解像度画像の指定

以下の例では、解像度に基づいて異なる画像を表示します。

<picture>
  <source srcset="image@2x.jpg 2x, image@3x.jpg 3x">
  <img src="image.jpg" alt="A sample image">
</picture>

この例では、srcset 属性を使用して、解像度が2倍や3倍のディスプレイ用に異なる画像を提供しています。ブラウザは最適な解像度の画像を選択して表示します。

デフォルト画像の指定

以下の例では、<img> 要素を使ってデフォルトの画像を指定しています。

<picture>
  <source srcset="image-large.jpg" media="(min-width: 800px)">
  <source srcset="image-small.jpg" media="(max-width: 799px)">
  <img src="image-default.jpg" alt="A default image">
</picture>

この場合、media 属性によって画面幅に基づいて異なる画像が選択され、<img> 要素は src 属性を使用してデフォルトの画像を指定します。条件に該当しない場合に、この画像が表示されます。

アクセシビリティの考慮事項

画像を使用する際には、alt 属性を必ず指定することが推奨されます。これにより、視覚的に画像を確認できないユーザー（スクリーンリーダーを使用しているユーザーなど）が画像の内容を理解できるようになります。

また、<picture> 要素を使用する場合は、<img> 要素内に代替画像を指定しておくことが重要です。これにより、条件に合う画像が見つからない場合でも、デフォルトの画像が表示され、ユーザーに適切なコンテンツが提供されます。