Of 16 images, 0 have been lazy-loaded.

Lazy loading

Speed up your web pages by loading images only when they are needed. Lazy loading is easy with Sirv.

Lower bandwidth

There are 26 images on this page. Total file size would be about 600 kB but they only load if you scroll down.

By lazy loading the images, we are able to save 90-100% of the file-size, depending on how far the user scrolls down. This significant saving is achieved with lazy loading.

As you scroll down this page, more images will download upon demand.

Lazy loading in a JavaScript slideshow

Lazy loading inside Bootstrap Carousel

Perfect for mobiles

Mobile screens benefit the most from lazy loading because they’re small.

Furthermore, mobile users are less likely to scroll to the bottom of pages than desktop users.

Lazy loading without fade-in

By default, images fade-in. You can change this behavior to instantly display images as soon as they’ve downloaded.

This image will show instantly (no fade-in):

Responsive and customizable

All lazy loading images are responsive, to automatically fit the screen. Learn more about responsive imaging with Sirv.

Images can also be customized, with any of Sirv’s dynamic imaging options applied on-the-fly.

These images are cropped to different heights, by appending the crop.height parameter to the URL.

150px height crop:

250px height crop:

350px height crop:

Multiple benefits

  1. Helps the rest of your page load as fast as possible.
  2. Lowers your monthly data transfer for your Sirv account, which can reduce your monthly cost.
  3. Lowers usage for mobile users, who typically have capped monthly 3G/4G allowances.

Lazy loading with different fade-in time

1 second fade-in time

3 second fade-in time

5 second fade-in time

7 second fade-in time

Thanks to Frog Goes To Market for the beautiful product images.