lazysizes Image Lazy Load Library Demos


Image with LQIP technique

The low quality image placeholder pattern is a battletested performance technique. While it might increase measuered time until the onload event, it dramatically increases percieved performance.

This pattern is recommend for above the fold/crictical images.

	class="lazyload" />
Desert Road

Normal lazy image

The normal image pattern is can be used for non-critical images or in case there is no low quality image available:

<img class="lazyload" data-src="image.jpg" alt="Desert Road" />

responsive image with srcset and sizes attribute

Simply use data-srcset and data-sizes and you can support responsive images.

	sizes="(min-width: 1000px) 930px, 90vw"
	data-srcset="small.jpg 500w,
		medium.jpg 640w,
		big.jpg 1024w"
	class="lazyload" />
image with artdirection

responsive image with the picture element

The picture element is also supported. Simply add the lazyload class to the img and use data-srcset on your source and the img element.

	<!--[if IE 9]><video style="display: none"><![endif]-->
		media="(max-width: 500px)" />
			media="(max-width: 1024px)" />
<!--[if IE 9]></video><![endif]-->
		alt="image with artdirection" />

automatic sizes feature: In case of lazy loading images the sizes attribute of the img/source elements can be calculated with JS.

This automatic sizes feature is directly included in lazySizes. Simply use the keyword auto inside of the data-sizes attributes (data-sizes="auto").

Important: How sizes is calculated: The automatic sizes calculation takes the width of the image and the width of its parent element and uses the largest number of those two calculated numbers. It's therefore important, that all images are contained in a wrapper that isn't much bigger than the image should shown. Otherwise a wrong (too big) sizes attribute will be calculated.

responsive image with srcset and automatic sizes attribute

The autosizes feature makes using responsive images with the right sizes value easy as hell.

	data-srcset="small.jpg 500w,
		medium.jpg 640w,
		big.jpg 1024w"
	class="lazyload" />

Note that you must use either picturefill or respimage (recommended) for full cross browser support of responsive images.


Iframes can be loaded too:

<iframe data-src="//" class="lazyload" frameborder="0" allowfullscreen></iframe>


Simply add a a data-src to your widget (has to be a div/span element) and you are done:

<div data-ride="carousel" data-tag="script" data-src="assets/js/bootstrap.min.js" class="carousel lazyload">
	<!-- widget content -->
Desert Road
@ The Desert Tortoise Natural Area
Woman in water
A tree in the blue
Windows on Istanbul
Goldie Dawn
Sant Miquel del Fai
Avebury Stone Circle
el castil de tierra
Sky and earth
Missing Ulsoor lake (Explore)
Oxford Path 2