Lazy Image

The easiest to use image lazy loader.

Download! Only 803 bytes!

What is Lazy Image?

Lazy image is the easiest to use lazy loader for your website images.

Images have one of the largest impacts on a websites speed and by using a lazy loader like Tiny Lazy Image you can drastically reduce your load times

How to use Lazy Image?

Download the lazy-image.js file above and include it before the last body tag on your page.

Then you just need to use the data-lazy or data-lazybg attribute and clear your src tags.

And that's it!

<img data-lazy="your-image.jpg" src="" >
<div data-lazybg="background-image:src(your-image.jpg)"></div>

Lazy loading examples

Below is a bunch of high resolution uncompressed files, which because we only load them as they come into view, have no impact on the performance of the site

Click here to see how long this page would take to load without using the Lazy Image js.

On average it takes around 9-10 times longer to load! It get's much much worse on a mobile network though.