Lazy load
responsive images
demo

Article: http://ivopetkov.com/b/lazy-load-responsive-images/

In this demo, you'll find four div tags with various sizes. When the image inside each div becomes visible on the screen, the best version is selected and loaded. The available versions widths are 400px, 600px, 800px, 1000px, 1500px, 2000px, 2500px. You can easily see which version is loaded via the text inside the image.
max-width: 500px
reponsivelyLazy demo image
max-width: 900px
reponsivelyLazy demo image
width: 100%
reponsivelyLazy demo image
width: 800px
reponsivelyLazy demo image
In scrollable element
reponsivelyLazy demo image
reponsivelyLazy demo image
reponsivelyLazy demo image
With onlazyload handler
reponsivelyLazy demo image
Hidden (must call responsivelyLazy.run())
Lazy (non-image) content
The demo source is available at: https://github.com/ivopetkov/...