HTML

The HTML `<picture>` element is an element that allows specifying multiple image sources to display the optimal image according to different devices and screen sizes.

picture

　HTMLの picture要素は、レスポンシブイメージを実現するために使用されます。この要素は、異なる画面サイズやデバイスに応じて最適な画像を表示するための機能を提供します。具体的には、複数の source要素と1つの img要素を使用して、条件に応じた画像を選択します。

picture要素の基本的な構造

HTML

<picture>
	<source srcset="small.jpg" media="(max-width: 600px)">
	<source srcset="medium.jpg" media="(max-width: 1200px)">
	<source srcset="large.jpg">
	<img src="fallback.jpg" alt="Description of the image">
</picture>

各要素の説明

<picture>
画像をレスポンシブにするためのコンテナ要素です。
<source>
条件に基づいて表示する画像を指定します。srcset属性で画像の URLを、media属性でメディアクエリを指定します。メディアクエリに一致する場合、その <source>要素の画像が選択されます。
<img>
<picture>要素の中に配置される標準の画像要素です。全ての条件に一致しない場合や、ブラウザが <picture>要素をサポートしていない場合に表示されるフォールバック画像を指定します。

　この例では、画面幅が600ピクセル以下の場合は small.jpg が表示され、600ピクセルを超え1200ピクセル以下の場合は medium.jpg が表示され、それ以上の場合は large.jpg が表示されます。条件に一致しない場合や picture要素がサポートされていない場合は、fallback.jpgが表示されます。

メリット

レスポンシブデザインの実現
異なるデバイスに最適な画像を提供できます。
パフォーマンスの向上
不必要に大きな画像の読み込みを避けることで、ページの読み込み速度を改善できます。

　このように、picture要素はレスポンシブなウェブデザインにおいて非常に便利なツールです。

適切な画像サイズの一例

　画像の最適なサイズは、使用するデバイスや表示する内容により異なりますが、一般的なガイドラインとして以下のサイズを参考にできます。

小さいデバイス（スマートフォン）用画像
  • サイズ: 600px以下の幅
  • 例: 480px × 320px
中程度のデバイス（タブレット）用画像
  • サイズ: 600px〜1200pxの幅
  • 例: 800px × 600px
大きいデバイス（デスクトップ）用画像
  • サイズ: 1200px以上の幅
  • 例: 1600px × 1200px

Sample

　各デバイスサイズに適した画像の解像度を指定します。

HTML

<picture>
	<source srcset="picture_bg_480_320.jpg" media="(max-width: 600px)">
	<source srcset="picture_bg_800_533.jpg" media="(max-width: 1200px)">
	<source srcset="picture_bg_1600_1067.jpg">
	<img src="picture_bg_3072_2048.jpg" alt="Description of the image">
</picture>
picture_bg_480_320.jpg
幅480px、高さ320px
picture_bg_800_533.jpg
幅800px、高さ533px
picture_bg_1600_1067.jpg
幅1600px、高さ1067px
picture_bg_3072_2048.jpg
幅3072px、高さ2048px（大きな画面にも対応できるようにフォールバックとして最大サイズを使用）

　これにより、各デバイスで最適な画像が表示され、パフォーマンスと表示品質を両立できます。

Description of the image