<picture> element

PictureElement

<!-- Angular picture-fill: https://github.com/tinacious/angular-picturefill -->
<!-- ng.pictureFill -->

<span picture-fill data-alt="Image Description">
  <span pf-src="images/image.png" data-media="(min-width: 1px)"></span>
  <span pf-src="images/image-600.png" data-media="(min-width: 645px)"></span>
  <span pf-src="images/image-1024.png" data-media="(min-width: 960px)"></span>
</span>

<span picture-fill data-alt="{{post.thumbnail.description}}" ng-if="post.thumbnail">
  <span pf-src="{{post.thumbnail.url}}"></span>
  <span pf-src="{{post.thumbnail.url | trimExt}}-150x150.jpg" data-media="(min-width: 1px)"></span>
  <span pf-src="{{post.thumbnail.url | trimExt}}-300x300.jpg" data-media="(min-width: 1px) and (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi),(min-resolution: 1.5dppx)"></span>
  <span pf-src="{{post.thumbnail.url | trimExt}}-300x225.jpg" data-media="(min-width: 320px)"></span>
  <span pf-src="{{post.thumbnail.url | trimExt}}-600x450.jpg" data-media="(min-width: 320px) and (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi),(min-resolution: 1.5dppx)"></span>
  <span pf-src="{{post.thumbnail.url | trimExt}}-1024x768.jpg" data-media="(min-width: 645px)"></span>
  <span pf-src="{{post.thumbnail.url | trimExt}}.jpg" data-media="(min-width: 645px) and (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi),(min-resolution: 1.5dppx)"></span>
  <span pf-src="{{post.thumbnail.url | trimExt}}.jpg" data-media="(min-width: 2068px)"></span>
</span>





<!-- Picture-fill VanillaJS : https://github.com/tinacious/angular-picturefill -->

<picture alt="Image Description">

<!-- default -->
  <source src="imgName.jpeg" />
  
<!-- w/ media query -->
  <source src="imgName-lrg.jpeg" media="(min-width: 900px)" />
  
<!-- IE6 Fallback -->
  <noscript>
    <img src="imgName.jpeg" alt="Image Description">
  </noscript>
  
</picture>