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="妖精の衣装を着たエルバ">
若干簡略化して説明すると
- 色々なサイズの画像を用意し
srcset
に指定する - ウィンドウサイズがいくつのときは画像がどのサイズか、といった条件を
sizes
に指定する - 条件を満たす範囲で1番小さな画像が読み込まれる
- モバイル画面に対して何千pxもあるような大きな画像を読み込まなくなってパフォーマンスアップ
といった具合で使えます。
どんな条件でどの画像が選ばれるかの説明は、以下の記事が分かりやすいと思います。
Can I use...
ここからがタイトルの内容です。
Can I use...を見てみましょう。
はい、IEは非対応です。
ですが、srcset
が非対応だからと言ってsrcset
を指定したimg
要素がまるっと表示できない訳ではありません。1
img
の中のsrcset
は理解できないけど、src
があればそちらを読みに行きます。
まとめると以下の表のようになり「全員に不適切な読み込み速度を提供するくらいなら、一部の人2だけにでも良い読み込み速度を提供した方が良い」と言えるのではないでしょうか。
srcsetを使う場合 | srcsetを使わない場合 | |
---|---|---|
IE以外のブラウザを使っている人に | 最適な画像読み込みを提供できる | デバイスサイズなどに関係なく大きな画像を提供してしまう |
IEを使っている人に | デバイスサイズなどに関係なく大きな画像を提供してしまう | デバイスサイズなどに関係なく大きな画像を提供してしまう |
まとめ
- IE非対応の属性とは言え、img要素にsrcsetを使うのは(フォールバックが効くので)良いと思われる
- ただしpicture要素は要素そのものが非対応なので辞めておくかポリフィル利用を検討する方が安全そう
-
picture
要素は要素そのものがIEに非対応なので、駄目です。 https://caniuse.com/picture ↩ -
Statcounterによれば2021年12月時点で、日本のIE以外利用者は98%程度でした。一部の人という言い回しも不適切ですが便宜上こう表現しています。 ↩
Author And Source
この問題について(srcset属性はIE11非対応……だけどsrcがフォールバックになるから使ってしまおう), 我々は、より多くの情報をここで見つけました https://qiita.com/xrxoxcxox/items/b593c32c602df314b1fe著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .