Imager.js

Directly below is our main image, we load this regardless of JavaScript support (it hasn't been set-up to work with Imager.js)

Because it isn't affected by Imager.js you'll notice that the size of the image changes when the screen dimensions change (because of our CSS: img { max-width: 100%; }) but the image isn't actually replaced.

Below are three <div> elements that are enhanced using Imager.js and so they will lazy-load more images (as long as JavaScript is enabled).

Breakpoints occurs at: [96, 130, 165, 200, 235, 270, 304, 340, 375, 410, 445, 485, 520, 555, 590, 625, 660, 695, 736] pixels.

No fixed-size container

No fixed-size container + img { max-width: 100%; }

Fixed size container

No fixed-size container + data-width="320"

Fixed size container + data-width="500"

Triggered image load (add elements)