LazyPic.JS

Load every bits of images on demand, using Webp whenever possible.

Step 1 - The Magic data-lazyload & data-webp

  1. A 1px blank png file as placeholder
  2. Using the data-lazyload attribute holding the target image file
  3. Using the data-webp attribute holding the corresponsive webp file (not neccessary if you don't wanna use webp!)

Step2 - Reference the LazyPic.JS and fire it!

Showcase