Lazy Load

For image-intensive pages, lazy loading offers a great tool to help get page weights down.

How lazy load works

The first image will load normally. Any other images will load as they are scrolled in to view.

HTML

To use lazy loading with your images, you'll start by using the following markup:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
data-lazy
data-orginal="/path/to/your/image"
width="800" height="450">

Images marked up in this way will only load as we need them.