【いまスニ】画像をブラウザサイズによって出し分ける！※デモあり※

「いまスニ」とはいまさら感漂うスニペット集をまとめる記事です。
第三回としては、レスポンシブデザインが当たり前になってきた昨今、ブラウザサイズ毎に画像を出し分ける方法を2つご紹介してます！
前提条件として、ブレイクポイントが1つ（max-width:640px）のみで、出し分けを行う場合をサンプルとしています。

デモページ

HTML5だけで出し分ける

HTML5で追加された要素を利用します。

HTML

カンタンに説明を書くと…。
ブラウザの横幅が640px以下の場合、640×640.jpgを表示します。
上記以外の場合は1280×1280.jpgを表示します。
sourceタグについては複数指定することができるため、複数のブレークポイントにも対応可能です。

メリット

次で説明するCSSだけで出し分ける方法よりも、指定サイズ以外の不要な画像を読み込まないためページ全体の容量は軽く済みます。

デメリット

picture要素はIEには非対応なため、IEも対応したい場合は別途picturefill.js等のJSプラグインを導入する必要があります。
また、ブラウザによってはブラウザの横幅を可変しても画像が変わらない場合があるので、検証時は要注意ですね。

CSSで出し分ける

picture要素が出る前はこちらの実装が一般的だったかもしれません。

HTML

CSS

こちらもカンタンに説明すると…。
ブラウザの横幅が640pxより大きい場合、640×640.jpgの画像を非表示にして、1280×1280.jpgのみを表示。
横幅が640px以下の場合、1280×1280.jpgの画像を非表示にして、640×640.jpgのみを表示しています。

メリット

真新しい書き方ではないので、比較的カンタンに実装できます。

デメリット

すべての画像サイズを読み込んでから非表示にするため、ページの表示スピードを考えるとあまりよろしくない実装になります。

まとめ

上記2つデモはこちらです。
いかがでしたでしょうか。
画像の出し分けについては、レスポンシブデザインに対応するWebサイトには欠かせない仕組みになると思います。
これを機にいろんなパターンにチャレンジしてみて、いつでも最適でキレイな画像が表示できるようになるといいですね！

関連記事はこちら

【いまスニ】viewportの設定を端末毎に出し分ける！※デモあり※ 【いまスニ】いまさら感漂うスニペット集 簡単スムーズスクロールのアレンジ※デモあり※ 【いまスニ】外部リンクアイコンをCSSだけで一括設置※デモあり※ Lottieで作ったアニメーションをWebサイトで実装（レスポンシブ対応）