未経験からエンジニアになりたい人必見!
おすすめプログラミングスクール3選!

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

本記事では、HTMLのpictureタグの使い方について解説しています。

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

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

作成者たにぐち まこと
学習時間9時間
受講者数42,075人
レビュー (8,925件)

pictureタグとは

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

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

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

pictureタグの使い方

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

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

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

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

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

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

sourceタグに属性を設定する

srcset

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

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

media

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

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

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

HTML
<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

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

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

MIMEタイプとは?

MIMEタイプとは、データ形式を識別するためのコードの体系です。

JPEG画像の場合は「image/jpg」、PNG画像の場合は「image/png」と書きます。

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

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

webp形式の画像を扱う場合

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

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

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

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

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

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

IE対応させる方法

主要ブラウザはpictureタグに対応していますが、IEは対応していないためそのまま使用しても画像が表示されません。

IEでpictureタグを使うにはポリフィルのPicturefill.jsを読み込ませる必要があります。Picturefill.jsはCDNでも提供されているので、下記のコードを</body>の直前に追加してください。

HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.js"></script>

公式からファイルをダウンロードして使いたい人は、こちらのPicturefill.js公式ページからダウンロードすることができます。

Web開発で聞くポリフィル(polyfill)とは?