本記事では、HTMLの画像をレスポンシブに切り替えることができるpictureタグの使い方について解説しています。
- HTMLとCSSの基本が体系的に学べる
- Webデザインの基本が学べる
- 1つのWebサイトを作りながら学べる
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
変数名/関数名にもう悩まない!
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
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タイプとは、データ形式を識別するためのコードの体系です。
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だけで可能になるので開発スピードが格段に上がります。