IE11でもpicture要素を使えるようにするポリフィル「Picturefill.js」

Picturefill.jsは、picture要素に対応していないブラウザでもpicture要素による画像の切り替えができるようになるポリフィルです。

picture要素を使うことで、ブラウザの幅によって画像を出し分けることができます。例えば、以下のように記述すると、1000px以上ならextralarge.jpg、800px以上1000px未満ならlarge.jpg、800px未満ならmedium.jpgが表示されます。

<picture>
  <source srcset="extralarge.jpg" media="(min-width: 1000px)">
  <source srcset="large.jpg" media="(min-width: 800px)">
  <img src="medium.jpg" alt="">
</picture>

このように、picture要素は非常に便利なのですが、IE11以下は未対応です。クライアントワークではまだIE11を切り捨てるわけにはいかず、picture要素の使用を躊躇っているというケースもあるかと思います。

そんな悩みを解決してくれるのが「Picturefill.js」です。

Picturefill.jsの使い方

使い方は非常に簡単で、Picturefill.jsのファイルを読み込むだけです。CDNで提供されているので、以下を</body>の直前に追加します。

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

公式サイトからファイルをダウンロードして設置しても大丈夫です。

picture要素側は、通常通りマークアップすればOKです。

<picture>
  <source srcset="extralarge.jpg" media="(min-width: 1000px)">
  <source srcset="large.jpg" media="(min-width: 800px)">
  <img src="medium.jpg" alt="">
</picture>

もし、画像が2重に読み込まれる場合は、以下のようにimgでもsrcset属性を使うことで解消されます。

<picture>
  <source srcset="images/extralarge.jpg" media="(min-width: 1000px)">
  <source srcset="images/large.jpg" media="(min-width: 800px)">
  <img srcset="images/medium.jpg" alt="">
</picture>

あとがき

ファイルを読み込むだけでIE11でもpicture要素が使えるようになるのは素晴らしいですね。

画面サイズに合わせて画像の出し分けを行いたい場合は、ぜひご活用ください。