srcsetと＜picture＞要素で画像を出し分けよう ― コラムーベイクロスマーケティング株式会社

世の中にスマホが普及し、モバイルファーストがうたわれるようになってから大分経ちました。
現在では多様なデバイス、ウィンドウサイズによる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 Baycross Marketing