srcset属性はIE11非対応……だけどsrcがフォールバックになるから使ってしまおう

この記事の概要

「srcset属性使おうかなと思ったんですけど、IE11が非対応だから使えなくて……。」

という会話があったのですが、使っても良いのでは？と思ったので記事にしました。

そもそもsrcsetとは

img要素やpicture要素に対して、複数のソースを指定できるものです。

MDN Docsよりコードを拝借しますが、以下のような書き方ができます。

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="妖精の衣装を着たエルバ">

若干簡略化して説明すると

1. 色々なサイズの画像を用意しsrcsetに指定する
2. ウィンドウサイズがいくつのときは画像がどのサイズか、といった条件をsizesに指定する
3. 条件を満たす範囲で1番小さな画像が読み込まれる
4. モバイル画面に対して何千pxもあるような大きな画像を読み込まなくなってパフォーマンスアップ

といった具合で使えます。

どんな条件でどの画像が選ばれるかの説明は、以下の記事が分かりやすいと思います。

Can I use...

ここからがタイトルの内容です。
Can I use...を見てみましょう。

はい、IEは非対応です。

ですが、srcsetが非対応だからと言ってsrcsetを指定したimg要素がまるっと表示できない訳ではありません。¹
imgの中のsrcsetは理解できないけど、srcがあればそちらを読みに行きます。

まとめると以下の表のようになり「全員に不適切な読み込み速度を提供するくらいなら、一部の人²だけにでも良い読み込み速度を提供した方が良い」と言えるのではないでしょうか。

	srcsetを使う場合	srcsetを使わない場合
IE以外のブラウザを使っている人に	最適な画像読み込みを提供できる	デバイスサイズなどに関係なく大きな画像を提供してしまう
IEを使っている人に	デバイスサイズなどに関係なく大きな画像を提供してしまう	デバイスサイズなどに関係なく大きな画像を提供してしまう

まとめ

• IE非対応の属性とは言え、img要素にsrcsetを使うのは（フォールバックが効くので）良いと思われる
• ただしpicture要素は要素そのものが非対応なので辞めておくかポリフィル利用を検討する方が安全そう

---

1. picture要素は要素そのものがIEに非対応なので、駄目です。 https://caniuse.com/picture ↩

2. Statcounterによれば2021年12月時点で、日本のIE以外利用者は98%程度でした。一部の人という言い回しも不適切ですが便宜上こう表現しています。 ↩