<picture> <source media="(min-width: 600px)" srcset="images/demo-over600.png"> <img src="images/demo-under600.png" alt="超え" /> </picture>
さしあたってこれでCDNは読み込める。
<script> // Picture element HTML5 shiv document.createElement( "picture" ); </script> <script src="https://cdn.rawgit.com/scottjehl/picturefill/3.0.2/dist/picturefill.min.js" async></script>
browserifyでモジュールを合体させる場合には、大本となるapp.jsの冒頭で
import picturefill from "picturefill"; picturefill();
すればOK。読み込んだnpmを実行している。
キャプションをつける
<figure> <picture class="concept-image"> <source media="(min-width: 600px)" srcset="img.jpg"> <img src="smallimage.jpg" alt="" /> </picture> <figcaption>caption</figcaption> </figure>