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" />
- 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
- 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.
We charged your card and sent you a receipt
You'll need an account to access this in our app. Please create a password to continue.
Download from the App Store or text yourself a link to the app
Good news! Since you already have a Gumroad account, it's also been added to your library.