世の中にスマホが普及し、モバイルファーストがうたわれるようになってから大分経ちました。
現在では多様なデバイス、ウィンドウサイズによるWebサイトの閲覧が当たり前となり、
制作側にはその状況への対応が求められています。

読み込み速度の改善、タッチ操作を考慮したUI設計など、制作者が気を配るべき箇所は多種多様です。
その中でも頭を悩ませるものの一つが、ウィンドウサイズごとの画像の最適化ではないでしょうか。

例えば、高DPIのデバイス向けに最適な画像を表示させたい。
あるいは、画面幅ごとに画像を出し分けたい。
そのような場合、CSSを使わずとも、シンプルなHTMLだけで対応可能です。

高DPIのデバイス向けにsrcsetを使用する

<img>要素にsrcset属性を追加すると、デバイスのDPIに応じて最適化された画像を表示させられます。
例えば、以下のように記述すれば、DPI 2倍のディスプレイでは高DPIの画像を表示させ、
DPI 1倍では通常の画像を表示させる、というような出し分けが可能です。

<img src="img.jpg" srcset="img@2x.jpg 2x">

ブラウザでsrcsetがサポートされている場合、srcsetで記述された各条件と画像を解析したうえで
リクエストが送信されます。
これにより、環境ごとの最適な画像だけを読み込むことが可能です。

画面幅ごとに画像を出し分けたい

レスポンシブデザインで、画面幅によって表示させる画像を変化させたいですか?
そのような場合、下記のように<picture>要素を用いることで、CSS無しに画像の出し分けを実現できます。
それにより、画面幅によるレイアウトの変更に対してより柔軟に対応できます。

  <picture>
    <source media="(min-width: 800px)" srcset="images/img_large.jpg">
    <source media="(min-width: 450px)" srcset="images/img-mid.jpg">
    <img src="images/img-small.jpg">
  </picture>
  

この場合、画面幅が
・800px以上:img_large.jpg
・450px~800px:img_mid.jpg
・450px以下もしくは<picture>要素がサポートされていない:img_small.jpg
の画像が読み込まれます。
picture要素も<srcset>と同じく、非表示の画像は読み込まれません。

※注意点

<picture>要素内の<img>要素は必須です。これを記述しないと画像は表示されません。
<picture>要素内の<img>要素は、<picture>要素のフォールバックとしての役割を果たします。
ブラウザが<picture>要素をサポートしていない場合、もしくは<source>要素の条件を満たさない場合は<img>要素が表示されます。

<img>要素は一番最後に記述しましょう。<img>要素の後に<source>要素が書かれた場合、
それらは無視されます。

IE11への対応

IE11は、srcset属性と<picture>要素のどちらにも未対応です。
しかし、いまだに日本のブラウザシェアの14%をIE11が占めている(2018年11月段階)ことを考えると、それらを活用するにはIEへの対応が必須となります。

IE11でsrcset属性と<picture>要素を用いる場合、「picturefill.js」というポリフィルを使用することで
問題なく対応可能です。
picturefill.jsをダウンロード後、読み込むだけで使用できます。

<script src="picturefill.js"></script>

CDNから読み込むこともできます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.js"></script>

最後に

レスポンシブデザインでWebサイトを制作する場合、1枚の画像だけではレイアウト変更に対応できない場合が
多々あります。
また、高DPI向けのデバイス向けの画像を通常のデバイスでも表示させるのは、読み込み速度の面で無駄と
なります。

そのような時にsrcset属性と<picture>要素を用いれば、HTMLと簡単なJSだけで画像を出し分け可能です。
ぜひ1度、試してみてください。


新規Webサイト制作・リニューアルのサービス内容はこちらから

Written by

楽天市場の運営代行はベイクロスマーケティングにお任せください! 繁忙期猫の手も借りたい!そんなあなたに代わって制作いたします。バナー・LP・商品画像・イラスト