Responsive Lazyload Examples: Degrade Gracefully If JavaScript Is Disabled

All photos by paint with stars photography.

Basic usage.

image description

The simplest usage is almost plain ol’ markup you’d use anyways.

<div class="js--lazyload">
  <img alt="image description"
       src="images/example@2x.jpg"
       srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
       data-lazyload="images/example-300x150.jpg 300w,
                      images/example-600x300.jpg 600w,
                      images/example.jpg 690w,
                      images/example@2x.jpg 1380w">
  <noscript>
    <img alt="image description"
         src="images/example@2x.jpg"
         srcset="images/example-300x150.jpg 300w,
                 images/example-600x300.jpg 600w,
                 images/example.jpg 690w,
                 images/example@2x.jpg 1380w">
  </noscript>
</div>

The key differences are:

To enable lazyloading, include the following snippet just before your closing </body> tag:

<script src="path/to/bower_components/responsive-lazyload/dist/responsive-lazyload.min.js"></script>
<script>
  responsiveLazyload();
</script>

Use with figure elements and other wrappers.

image description
You can also include lazyloaded images in figure elements.

The responsive image markup can be included inside other elements (e.g. figure) without issue. It does require an extra tag, unfortunately.

<figure>
  <div class="js--lazyload">
    <img alt="image description"
         src="images/example02@2x.jpg"
         srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
         data-lazyload="images/example02-300x150.jpg 300w,
                        images/example02-600x300.jpg 600w,
                        images/example02.jpg 690w,
                        images/example02@2x.jpg 1380w">
    <noscript>
      <img alt="image description"
           src="images/example02@2x.jpg"
           srcset="images/example02-300x150.jpg 300w,
                   images/example02-600x300.jpg 600w,
                   images/example02.jpg 690w,
                   images/example02@2x.jpg 1380w">
    </noscript>
  </div>
  <figcaption>
    You can also include lazyloaded images in <code>figure</code> elements.
  </figcaption>
</figure>

How to Handle Different Aspect Ratios

image description

By default, responsiveLazyload.js sets images to a 2:1 aspect ratio (padding-bottom: 50%; — figure this out by dividing the height by the width, e.g. 400h ÷ 800w = 0.5).

To change the aspect ratio to match your image, divide the height by the width and add an inline style to the wrapper:

<div class="js--lazyload"
     style="padding-bottom: 66.67%">
  <img alt="image description"
       src="images/example03@2x.jpg"
       srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
       data-lazyload="images/example03-300w.jpg 300w,
                      images/example03-600w.jpg 600w,
                      images/example03.jpg 690w,
                      images/example03@2x.jpg 1380w">
  <noscript>
    <img alt="image description"
         src="images/example03@2x.jpg"
         srcset="images/example03-300w.jpg 300w,
                 images/example03-600w.jpg 600w,
                 images/example03.jpg 690w,
                 images/example03@2x.jpg 1380w">
  </noscript>
</div>

Images With Unknown Sizes

image description

To avoid setting explicit sizes, the lazyload class can be applied directly to the img tag.

<img alt="image description"
     class="js--lazyload"
     src="images/example04@2x.jpg"
     srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
     data-lazyload="images/example04-300x150.jpg 300w,
                    images/example04-600x300.jpg 600w,
                    images/example04.jpg 690w,
                    images/example04@2x.jpg 1380w">
<noscript>
  <img alt="image description"
       class="js--lazyload js--lazyload--fallback"
       src="images/example04@2x.jpg"
       srcset="images/example04-300x150.jpg 300w,
               images/example04-600x300.jpg 600w,
               images/example04.jpg 690w,
               images/example04@2x.jpg 1380w">
</noscript>

NOTE: This approach causes the content to reflow (unless the image is square) and may cause layout issues since it tries to set the image at 100% of its container width. Use at your own discretion.

ALSO NOTE: Since an image that’s not in the wrapper won't load properly, we have to hide it manually if JS is disabled but leave the fallback image visible:

.no-js img.js--lazyload:not(.js--lazyload--fallback) {
  display: none;
}
Fork me on GitHub