Skip to content
Skip to content

Responsive images (lazy loaded)

This module uses Layzr.js, a module for lazy loading responsive images.

Usage

You can lazy load images and make them responsive by using data-module="ResImg".

<div data-module="ResImg">
  <img data-resimg-normal="/images/placeholder/img-320x200.png"
       data-resimg-retina="/images/placeholder/img-320x200@x2.png"
       data-resimg-srcset="/images/placeholder/img-640x400.png 320w,
                           /images/placeholder/img-768x480.png 640w,
                           /images/placeholder/img-960x600.png 768w,
                           /images/placeholder/img-1024x640.png 960w"
       alt="Lazy loaded, responsive image">
</div>
<noscript>
  <img src="https://placehold.it/320x180&text=320x180(16:9)" alt="">
</noscript>

You use the data attributes in the img tag to define which images to load at which viewport size.

data-normal
Required the normal resolution source
data-retina
Optional the retina/high resolution source
data-srcset
Optional the source set for the responsive images

Using the Cover object

We can use the cover component to maintain the aspect ratio of the image before the image has loaded. This stops the page jumping around as images are loaded.

We can also use the loading icon to display a loading icon as the image loads.

Lazy loaded, responsive image <noscript> <img src="https://placehold.it/320x180&text=320x180(16:9)" alt=""> </noscript> 
<div class="o-cover o-cover--ratio21x9">
  {{ icon('spinner', '0 0 1 1', 'o-icon--spin o-icon--xl o-cover-loading') }}
  <div id="cover-object" class="o-cover-object">
    <img data-resimg-normal="https://placehold.it/320x180&text=320x180(16:9)"
         data-resimg-retina="https://placehold.it/320x180&text=320x180(16:9)-Retina"
         data-resimg-srcset="https://placehold.it/320x180&text=320x180(16:9) 320w,
                      ..."
         alt="Lazy loaded, responsive image">
  </div>
</div>

to see the loading view.