INDEX
pictureの概要
| レスポンシブ画像を切り替える HTMLタグ | ||
|
<picture><source srcset=”画像” media=”条件”><img src=”デフォルト画像”></picture> 概要 pictureタグは、異なる画面サイズやデバイスに応じて適切な画像を表示するために使用されます。主にレスポンシブデザインで、高解像度画像やフォーマットの切り替えに利用されます。 |
||
|
pictureタグの主な要素と属性
| 要素 / 属性 | 説明 | 使用例 |
|---|---|---|
picture |
複数の画像を切り替えるコンテナ | <picture></picture> |
source |
条件に応じて表示する画像を指定 | <source srcset="image.jpg" media="(max-width: 600px)"> |
srcset |
表示する画像を指定 | <source srcset="image-large.jpg"> |
media |
メディアクエリ（表示条件） | <source media="(max-width: 600px)"> |
type |
画像のMIMEタイプを指定 | <source srcset="image.webp" type="image/webp"> |
img |
デフォルトの画像 | <img src="default.jpg" alt="画像"> |
pictureタグの基本的な使い方
以下の例では、画面サイズに応じて異なる画像を表示しています。
<picture>
<source srcset="small.jpg" media="(max-width: 600px)">
<source srcset="medium.jpg" media="(max-width: 1200px)">
<img src="large.jpg" alt="レスポンシブ画像">
</picture>pictureタグの応用：WebP画像の利用
WebP形式をサポートするブラウザではWebP画像を表示し、サポートしない場合はJPEG画像を表示します。
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="フォールバック画像">
</picture>pictureタグの応用：解像度に応じた画像の表示
高解像度のディスプレイでは大きな画像を表示し、通常のディスプレイでは標準の画像を表示します。
<picture>
<source srcset="high-res.jpg" media="(min-resolution: 2dppx)">
<img src="normal.jpg" alt="標準解像度の画像">
</picture>注意事項
- sourceタグの並び順は、上から順に適用される。
- imgタグはすべてのブラウザでサポートされるため、必ず指定する。
- レスポンシブデザインに適用すると、ユーザーのデバイスに最適な画像を提供できる。
- WebPのような新しい画像フォーマットをサポートするために活用すると、ページの軽量化につながる。
よくある質問
- Q: pictureタグとimgタグの違いは？
- A: pictureタグは条件によって異なる画像を表示できるが、imgタグは1つの画像しか指定できない。
- Q: sourceタグを使わずにpictureタグを利用できますか？
- A: いいえ、pictureタグ内にはsourceタグまたはimgタグが必要です。
- Q: WebP画像を優先的に表示する方法は？
- A: sourceタグの
type="image/webp"を指定すると、WebPをサポートするブラウザでは優先的に表示される。 - Q: すべてのブラウザでpictureタグは動作しますか？
- A: ほとんどのモダンブラウザで動作しますが、古いIEではサポートされていません。
- Q: メディアクエリを使わずに画像の切り替えは可能ですか？
- A: はい、
srcsetを使用すれば、解像度に応じた画像の切り替えが可能です。
まとめ
pictureタグは、デバイスや解像度に応じて異なる画像を表示するためのタグ。- sourceタグを使用して、画像の種類や条件を指定できる。
- imgタグをフォールバック用に必ず含める。
- WebPなどの新しいフォーマットを活用すると、ページの軽量化が可能。
- レスポンシブデザインに最適で、ページのパフォーマンス向上に役立つ。