HTML/CSS

【HTML】pictureタグの使い方|画像をレスポンシブに切り替える

本記事では、HTMLの画像をレスポンシブに切り替えることができるpictureタグの使い方について解説しています。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

動画情報
作成者たにぐち まこと
学習時間9時間
受講者数43,706人
レビュー (9,232件)
動画の詳細はこちら

pictureタグとは

pictureタグとは、HTML5で登場した新しいタグです。

現在のWebサイトでは、スマホのキービジュアルが縦長に作られていることが多いため、スマホとPCで別々の画像を使うことが多いです。

このような場面でpictureタグを使うことで、CSSやJavaScriptを使わずにHTMLだけで簡単に画像をレスポンシブに切り替えることができます。

pictureタグの使い方

pictureタグの基本的な使い方は、pictureタグ内に複数のsourceタグと1つのimgタグを設定します。

<picture>
  <source srcset="sample1.jpg" 属性 />
  <source srcset="sample2.jpg" 属性 />
  <img src="sample3.jpg" alt="~" />
</picture>

ブラウザはpictureタグ内に設定されているsourceタグを上から順に読み込みます。

sourceタグにはブラウザ幅が◯px以上の時にだけ表示させたいなどの属性を設定することができ、ブラウザは読み込んだsourceタグがその条件に満たしていなと判断したら次のsourceタグを読み込みます。

条件に一致したsourceタグがあった場合は、srcset属性で設定されている画像を表示させます。もし、一つも条件に一致しなかった場合は、最後に記載しているimgタグの画像を表示させます。

<picture>
  <source srcset="sample1.jpg" 属性 /> <!-- 1番目に読み込まれる -->
  <source srcset="sample2.jpg" 属性 /> <!-- 1番目の条件に不一致の場合に読み込まれる -->
  <img src="sample3.jpg" alt="" /> <!-- 全てのsourceに不一致の場合に読み込まれる -->
</picture>

sourceタグに属性を設定する

srcset

<source srcset="画像パス" />

srcset属性には、条件に一致した時に表示させたい画像のパスまたはURLを設定します。

media

<source srcset="画像パス" media="メディアクエリ" />

media属性には、ブラウザ幅に応じた条件を設定することができます。

例えば、スマホ(599px以下)・タブレット(600px〜1,024px以下)・PC(1,025px以上)で別々の画像を表示させたい場合は、以下のように書きます。

<picture>
  <source srcset="pc.jpg" media="(min-width: 1025px)"/> <!-- PC画像 -->
  <source srcset="tablet.jpg" media="(min-width: 600px)"/> <!-- タブレット画像 -->
  <img src="smartphone.jpg" alt=""/> <!-- スマホ画像 -->
</picture>

type

<source srcset="画像パス" type="画像形式" />

type属性には、画像形式をMIMEタイプで指定します。

MIMEタイプとは?

MIMEタイプとは、データ形式を識別するためのコードの体系です。
JPEG画像の場合は「image/jpg」、PNG画像の場合は「image/png」と書きます。

jpgやpngなどの一般的な画像形式は全てのブラウザで対応しているためtype属性をわざわざ設定する必要はありませんが、webp形式の画像を表示させたい場合は未対応のブラウザがあるため「type=”image/webp”」と書く必要があります。

<source srcset="sample.webp" type="image/webp" />

webp形式の画像を扱う場合

webp形式の画像を扱う場合は、imgタグの設定忘れに注意しましょう。

よくあるのが、IEで画像が表示されないと連絡が来てソースコードを確認するとimgタグの漏れや設定ミスです。

<source srcset="sample.webp" type="image/webp" /> <!-- webp形式に未対応のブラウザはスルー -->
<img src="samp.jpg" alt=""> <!-- 設定ミスまたは設定していない -->

何故このようなことが起きてしまうのか、その理由は普段開発で使用しているブラウザがwebp形式に対応しているからです。

多くの開発者はChromeを使って表示確認をしたりデバッグをします。Chromeではwebp形式に対応しているため、imgタグの設定ミスをしてもその前にあるsourceタグの条件に一致し画像が表示されます。

そのため多くの開発者はそのミスに気づかずに作業を続けてしまいます。自分の携わっている案件で、webp形式未対応のブラウザが含まれている場合は注意しながら作業しましょう。

pictureタグはIEに非対応

先輩くん
先輩くん
下記のテーブル表にpictureタグの互換性についてブラウザ別にまとめたのでご覧ください
デバイス ブラウザ サポート
Chrome 38
Edge 13
FireFox 38
Internet Explorer 非対応
Opera 25
Safari 9.1
WebView Android 38
Chrome Android 38
FireFox for Android 38
Opera Android 25
Safari on iOS 9.3
Samsung Internet 3.0
後輩ちゃん
後輩ちゃん
pictureタグはIEに非対応しているから、表示がされないんですね!
先輩くん
先輩くん
その通り!でもIEが非対応だから絶対に使えないわけではなくて、IEでpictureタグを使えるようにする方法はあるから、その方法について解説するね

Picturefill.jsを読み込ませよう

Picturefill.jsは、pictureタグが対応していないブラウザでもpictureタグを使ってレスポンシブ対応の画像の切り替えができるようになるポリフィルです。

後輩ちゃん
後輩ちゃん
先輩!ポリフィルって何でしょうか?
先輩くん
先輩くん
ポリフィルは、最近の機能をサポートしていない古いブラウザーでも、その機能を使えるようにするためのコードだよ
このPicturefill.jsを使うことで非対応であるIEでもpictureタグを使えることができます。

Picturefill.jsを読み込む方法

Picturefill.jsはCDNで提供されているので、下記のscriptタグを</body>の直前に追加するだけで完了です。
<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.js"></script>

まとめ

今回の記事では、pictureタグの使い方について解説しました。

pictureタグを使えるようになると、今までJavaScriptで画像の出し分けをしていたのがHTMLだけで可能になるので開発スピードが格段に上がります。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村