PCとスマホの画像切り替えがpictureタグで幸せになれる

最近ではレスポンシブデザインが当たり前になっています。そこで問題になってくるのがPC用とスマホ用の画像の切り替え問題。
これまでは、メディアクエリで切り替えてたりしましたが、html5の現在、これに対応できるpictureタグという要素が出てきました。これまではブラウザの問題で使うのも躊躇うことがありましたが、現在ではIE以外はほとんどサポートされてるようなので今回、忘備録としてメモ。

PCとスマホで画像の出し分けをする

特に多いパターンがPCとスマホで画像を切り替えるパターン。（かと思ってる）
スマホは画面がPCより小さいのでバナーのデザインが少し変わってることも多いんですよね。
下記に簡単なサンプルを作成しました。ブラウザの幅を変えると画像の文字が「PC用」「タブレット用」「スマホ用」と変わります。

サンプル

pictureタグとは

そのような切り替えたい時に使えるのがpictureタグ。
pictureタグとはhtml5で追加されたタグですが、pictureはそれだけでは機能しません。あくまでpictureタグは大枠のような要素なので、pictureタグの中にはさらに必要なタグが必要になります。

pictureの基本的な書き方

そのpictureタグの書き方ですが、内包する要素として、sourceタグとimgタグは必須となります。ざっくりと書くと下記のようになります。

細かい説明は後にしますが、読み込まれた時にpictureタグの中のsourceはタグは上から順番に判定を行って条件に合った場合はその画像が表示され、どのsourceタグの条件に当てはまらなかった場合はimgタグに指定された画像が読み込まれます。
上記の例だとウィンドウの幅が 960px以上の場合はpc用の画像 、680px以上の場合はタブレット画像、そうでない場合はスマホの画像といった順番で判定していきます。

sourceタグについて

sourceタグは、media属性にメディアクエリを指定して、画像の設定はsrcset属性を使用します。src属性は使用できないので注意してください。

画像のフォーマットについて

また画像のフォーマットはtype属性を使用しますが、type 属性には、JPEGは image/jpeg、PNGは image/png、GIFは image/gif、SVGなら image/svg+xml と記載します。
media属性とtype属性は省略ができます。

imgタグについて

imgタグは上記のsourceタグの判定に以外の場合に表示される画像を設定します。こちらの場合は、sourceタグと違って今まで通りsrc属性を使って画像のパスを指定します。またこのimgタグで設定されたaltタグがsourceタグで表示された画像と共通で使用されます。

画像解像度による画像の切り替え

よくスマホなどで画像がぼやけてしまう時がありますが、異なるサイズや解像度のデバイスであっても同じ大きさで表示できるようにするデバイスピクセル比 (Device Pixel Ratio) というのがあります。
例えばiphone8 Retinaはデバイスピクセル比は2となります。
ですので200×200の画像をiphone8 Retinaで綺麗に表示させるには2倍の400×400の画像が必要となります。

2019年現在で最新のiphone Xのデバイスピクセル比は３です。apple関連のみですが、2019年現在の最新のデバイスピクセル比は下記を参照。

iPhone/iPad/Apple Watch解像度(画面サイズ)早見表

解像度に対応したpictureタグの書き方

では解像度に対応したpitcureタグはどう記載したらいいのか？
下記に全体像を載せます。

先に説明してしまうと、幅が960px以上でデバイスピクセル比が2の場合は「img_pc-2x.jpg」の画像、デバイスピクセル比が1の場合は「img_pc-1x.jpg」の画像、それ以外ではimgタグのsrcsetに記載されてる画像をデバイスピクセル比ごとに読み込むといった内容です。

srcset属性による切り分け

ではどのようなルールで切り分けるかというと、srcset属性の部分で切り替えることができます。
もちろんsourceタグだけでなくimgタグでもsrcset属性を使えます。

srcset属性内で、画像URLと記述子がセットで必要となり、カンマで区切って複数の解像度に対応する画像のURLと記述子を書いていきます。
画像のURLと記述子の間は半角スペースを空けます。

また記述子に使える単位は、ビューポート (ブラウザ表示領域) の横幅 w か、デバイスピクセル比を表す x です。今回は解像度なので、デバイスピクセル比が2の場合は記述は「2x」となります。

対応ブラウザについて

現在では、internet explorer以外のほとんどのブラウザ対応となっています。

未対応ブラウザへの対策は？

マイクロソフト、企業にInternet Explorerの使用をやめるよう要請してるようにpictureタグも対応していません。ただ未だに使われてるのが現状ともいえるので対応したい場合は下記のjavascriptのライブラリで対応するしかありません。

Picturefill

仕様方法は公式サイトで確認してみてください。

まとめ

これまでCSSとかjavascriptで対応していたことがhtmlだけでhtml5で追加されたpictureタグだけでできるようになりました。
こうやって作業が楽になってくることはいいですね。