picture要素、picturefillについて

Tweet

<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>