【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

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

HTML/CSSの学習におすすめ書籍
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
総合評価
( 5 )
メリット
  • HTMLとCSSの基本が体系的に学べる
  • Webデザインの基本が学べる
  • 1つのWebサイトを作りながら学べる
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

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タグの互換性についてブラウザ別にまとめたのでご覧ください

ブラウザサポート
Chrome38
Edge13
FireFox38
Internet Explorer非対応
Opera25
Safari9.1
WebView Android38
Chrome Android38
FireFox for Android38
Opera Android25
Safari on iOS9.3
Samsung Internet3.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アクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次