progressive-image.js
Advanced tools
demonstration | GitHub | npm | donate | @craigbuckler | craigbuckler.com
A lazy-loading progressive image system similar to those seen on Facebook and Medium. A very small, blurred image is replaced with the full-resolution equivalent when the element is scrolled into view.
Please use the code as you wish. Tweet me @craigbuckler if you find it useful and donate toward development if you use it commercially.
srcset and sizes attributes)Include the minified CSS and JavaScript anywhere in your page:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/progressive-image.js/dist/progressive-image.css">
<script src="https://cdn.jsdelivr.net/npm/progressive-image.js/dist/progressive-image.js"></script>
CDN URLs are shown above but you can also npm i progressive-image.js to install via npm and use a bundler.
Basic example:
<a href="full.jpg" class="progressive replace">
<img src="tiny.jpg" class="preview" alt="image" />
</a>
Where:
full.jpg is the large image.tiny.jpg is a very small preview image - typically 20px in width saved with high JPEG compression. It be added to the page directly or inlined as a data URI.Both images must have the same aspect ratio.
The full image is revealed when the preview is scrolled into view. After replacement, link-clicking is disabled and the HTML becomes:
<a href="full.jpg" class="progressive">
<img src="full.jpg" alt="image" />
</a>
Any class names applied to the preview are applied to the full image (except preview).
If JavaScript or image loading fails, a blurred version of the preview image can be clicked to view the full image.
To retain the link or use an alternative container element, add a data-href attribute with the large image URL:
<a href="http://site.com/" data-href="full.jpg" class="progressive replace">
<img src="tiny.jpg" class="preview" alt="image" />
</a>
Responsive images of differing sizes and resolutions can be defined in the container link/element using data-srcset and data-sizes attributes which map to the standard srcset and sizes attributes:
<a href="small.jpg"
data-srcset="small.jpg 800w, large.jpg 1200w"
data-sizes="100vw"
class="progressive replace">
<img src="tiny.jpg" class="preview" alt="image" />
</a>
On replacement, the image code becomes:
<img src="small.jpg" srcset="small.jpg 800w, large.jpg 1200w" sizes="100vw" alt="image" />
Modern browsers will load large.jpg when the viewport width is 800px or greater.
Further examples, options and usage notes can be found on the demonstration page.
See How to Build Your Own Progressive Image Loader for information about the inspiration and techniques used in this component.
pageshow event for Single Page Appsclass names applied to the preview are applied to the full image (except preview)FAQs
progressive lazy-loading image system
The npm package progressive-image.js receives a total of 307 weekly downloads. As such, progressive-image.js popularity was classified as not popular.
We found that progressive-image.js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Security News
Lovable’s OJ rewrites Vite’s dev server in Rust, reducing memory use and preview times as AI lowers the cost of open source reimplementation.
Security News
It has been one year since Shai-Hulud made its first appearance on npm.
Research
/Security News
Operators behind PolinRider used a compromised GitHub account to plant malware in four development versions of a Packagist package with 700,000+ downloads.