Example:
Use 'srcset' and 'sizes' for responsive Images

HTML attributes srcset and sizes for images are a great way to implement responsive content. Lazy can handle those attributes for you too. Just prepare your elements as seen below, and the correct data will be loaded.

The srcset attribute will even works great with the imageBase configuration of Lazy. In this case, the base path will be added to the srcset entries and the src tag as fallback.

Note: If you just want to add retina images to your page, there might be a much easier solution for doing this. 


    <img class="lazy" data-src="1x.jpg" data-srcset="1x.jpg 1x, 2x.jpg 2x, 3x.jpg 3x" data-sizes="700vw" />
    <img class="lazy" data-src="1x.jpg" data-srcset="1x.jpg 1x, 2x.jpg 2x, 3x.jpg 3x" data-sizes="700vw" />
    <img class="lazy" data-src="1x.jpg" data-srcset="1x.jpg 1x, 2x.jpg 2x, 3x.jpg 3x" data-sizes="700vw" />
    <img class="lazy" data-src="1x.jpg" data-srcset="1x.jpg 1x, 2x.jpg 2x, 3x.jpg 3x" data-sizes="700vw" />
    <img class="lazy" data-src="1x.jpg" data-srcset="1x.jpg 1x, 2x.jpg 2x, 3x.jpg 3x" data-sizes="700vw" />
    <img class="lazy" data-src="1x.jpg" data-srcset="1x.jpg 1x, 2x.jpg 2x, 3x.jpg 3x" data-sizes="700vw" />
    <img class="lazy" data-src="1x.jpg" data-srcset="1x.jpg 1x, 2x.jpg 2x, 3x.jpg 3x" data-sizes="700vw" />
    <img class="lazy" data-src="1x.jpg" data-srcset="1x.jpg 1x, 2x.jpg 2x, 3x.jpg 3x" data-sizes="700vw" />
    <img class="lazy" data-src="1x.jpg" data-srcset="1x.jpg 1x, 2x.jpg 2x, 3x.jpg 3x" data-sizes="700vw" />
    <img class="lazy" data-src="1x.jpg" data-srcset="1x.jpg 1x, 2x.jpg 2x, 3x.jpg 3x" data-sizes="700vw" />
                  

    img.lazy {
        width: 700px; 
        height: 467px; 
        display: block;
    }
                  

    $(function() {
        $('.lazy').lazy({
        	// works even for 'srcset' entries
        	imageBase: 'images/'
        });
    });

 

Note: All examples verbose their actions to the sidebar on the left and even to your browsers console by console.log. Check the output there (hit F12 key to open your browsers dev tools).

Demonstration