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要素が使えるようになるのは素晴らしいですね。
画面サイズに合わせて画像の出し分けを行いたい場合は、ぜひご活用ください。