Profile PictureCraig Buckler

Web development code, resources, and tutorials.


Craig Buckler
0 ratings

progressive-image.js implements an attractive lazy-loading image. A very small, blurred image is replaced with the full-resolution equivalent when the element is scrolled into view.

Basic usage - use a tiny <img> with a link to the full image with the following classes:

<a href="full.jpg" class="progressive replace">
    <img src="tiny.jpg" class="preview" alt="image" />

Benefits include:

  • saves unnecessary bandwidth
  • fast loading, high performance, images loaded on view
  • supports any image type (JPEG photographs are most appropriate)
  • supports responsive images (srcset and sizes attributes)
  • supports CSS background images
  • supports native lazy loading and aspect ratios
  • lightweight: 1,358 bytes of JavaScript, 407 bytes of CSS (minified)
  • any CSS reveal effect can be applied
  • no external dependencies - works with any framework
  • makes up to three attempts if images fail to download
  • works in all modern browsers (IE10+)
  • progressively-enhanced to work in older browsers
  • easy to use

Please donate to support development, receive priority support, and suggest new features.



Enter your info to begin your Monthly subscription. You can cancel anytime.


or pay with
You'll be charged US$1 today.
Powered by