Responsive Lazyload Examples: Degrade Gracefully If JavaScript Is Disabled

All photos by paint with stars photography.

Basic usage.

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:

• The img tag is placed inside a wrapper with the js--lazyload classes.
• The srcset attribute is set to a blank GIF (base-64 encoded to eliminate an extra request per image).
• The images that we want used for srcset are instead placed in the data-lazyload attribute.

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.

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

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

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