HTML picture タグの使い方

 HTML <picture> タグは、複数の画像ソースを指定し、ブラウザが画面サイズやデバイスピクセル密度などの要素に基づいて最適な画像を選択できるようにするものです。これにより、ウェブサイトは様々なデバイスで利用するユーザーにとって最適な画像表示を保証することができます。

<picture> タグの使い方を以下に詳しく説明します。

1. <picture> コンテナ:

この要素は、異なる画像オプションをラップするコンテナとして機能します。

2. <source> 要素:

<picture> タグ内に、1つ以上の <source> 要素を使用します。それぞれの <source> 要素は、画像ソースと、そのソースを使用するべきメディア条件を指定します。

• <source> 要素の srcset 属性は、画像ファイルへのパスをポイントします。
• media 属性は、その特定の画像ソースが最適な場合のメディアクエリを定義します。これは、画面幅、ピクセル密度、またはその他のメディア機能に基づいて設定できます。

3. 代替画像（オプション）:

<picture> タグの最後の子要素として <img> 要素を含めることができます。これは、ブラウザが <picture> タグをサポートしていない場合、または <source> 条件のいずれも満たされない場合に表示される画像です。

<picture> タグの動作例を以下に示します。

HTML

<picture>
  <source media="(min-width: 768px)" srcset="image-large.jpg">
  <source srcset="image-medium.jpg">
  <img src="image-small.jpg" alt="レスポンシブな画像">
</picture>

この例では：

• 画面幅が768px以上の場合、image-large.jpg が使用されます。
• より小さな画面では、image-medium.jpg が読み込まれます。
• ブラウザが <picture> をサポートしていない場合、または条件のいずれも適用されない場合、image-small.jpg が代替画像として表示されます。

<picture> タグを使用すると、ウェブサイトでよりレスポンシブかつ効率的な画像配信を実現できます。

補足:

• <picture> タグは比較的新しい機能であり、すべてのブラウザが完全にサポートしているわけではありません。古いブラウザでは、画像が表示されない場合があります。
• <picture> タグと組み合わせて、CSSメディアクエリを使用して、画像のサイズ、配置、その他のスタイルを画面サイズに応じて調整することもできます。
• より詳細な情報については、HTML <picture> タグに関する MDN ドキュメント を参照してください。