HTML | pictureタグで画像を表示する

2022-01-292022-01-30HTML 画像,HTML

HTMLのpicture（ピクチャー）タグを使って画像を表示する方法を紹介しています。

<picture>タグはmedia属性を使って表示領域を合わせて表示する画像を差し替えたり、type属性を使ってアクセスしたブラウザが指定したtypeに対応しているかどうかで表示する画像を変更したりする事ができるHTMLコードです。

pictureタグとmedia属性を使って画像を表示する

<picture>タグとmedia属性を使って画像を表示するサンプルコードになります。

<source>タグとmedia属性を使ってメディアの表示可能領域サイズに合わせて表示する画像を指定する事ができます。

サンプルコードでは、500pxより小さい横幅の場合は「sample-100×100.png」を表示して、それ以外の場合は「sample-l50x150.png」を表示します。

<picture>
	<source srcset="sample-100x100.png" media="(min-width: 500px)">
	<img src="sample-l50x150.png" alt="">
</picture>

pictureタグとtype属性を使って画像を表示する

<picture>タグとtype属性を使って画像を表示するサンプルコードです。

<source>タグとtype属性を使ってブラウザが対応しているかどうかで表示する画像を差し替えます。

サンプルコードでは、WebP画像に対応したブラウザの場合は「sample.webp」を表示して、対応していないブラウザでは「sample.png」を表示します。

<picture>
	<source srcset="sample.webp" type="image/webp">
	<img src="sample.png" alt="">
</picture>