Get started with picturefill CDN

MIT licensed

Picturefill: Lightweight library enhancing responsive, adaptive image loading with JS.

Tags:
  • polyfill
  • responsive
  • images
  • html
  • picture

Stable version

Copied!

How to start using picturefill CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with picturefill CDN - cdnhub.io</title>
  <link rel="images- sizes" src="images.desktop.jpg" media="(min-width: 1200px)">
  <link rel="images- sizes" src="images.tablet.jpg" media="(min-width: 768px) and (max-width: 1199px)">
  <link rel="images- sizes" src="images.mobile.jpg" media="(max-width: 767px)">
  <script src="https://cdn.cdnhub.io/picturefill/3.0.3/picturefill.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      if (!document.createElement.prototype.picture) {
        document.createElement('picture');
      }

      var picture = new Picture(document.querySelector('picture'));
    });
  </script>
</head>
<body>
  <picture>
    <source media="(min-width: 1200px)" srcset="images.desktop.jpg">
    <source media="(min-width: 768px) and (max-width: 1199px)" srcset="images.tablet.jpg">
    <source media="(max-width: 767px)" srcset="images.mobile.jpg">
    <img src="images.mobile.jpg" alt="Example Image">
  </picture>
</body>
</html>
Copied!
Copied!

All versions