Community Spotlight: The Blurry Image Lazy Loading Plugin
Large, high-resolution images on e-commerce sites often create a clunky user experience, causing a sudden "pop-in" effect that makes the page feel sluggish. A common and effective solution is to first load a small, blurry placeholder, which is then replaced by the full-quality image.
To solve this, community member Daniel Biegler created the Blurry Image Lazy Loading Plugin.
Implementation Guide
Community partner Pinelab also wrote up a full implementation guide, showcasing this plugin in an Astro project.
How It Works
The plugin works by generating a tiny data hash for each image using strategies like ThumbHash or BlurHash. This hash is stored in a previewImageHash custom field, which is automatically added to the Asset entity.
Your storefront can then use this hash to render a lightweight, blurred placeholder while the full-resolution image loads in the background.
The process is highly configurable. Hashes are generated automatically for any new assets, and the plugin supports both ThumbHash and BlurHash out of the box, with the option to extend it with custom strategies.
For existing assets, the plugin provides a GraphQL API with mutations to generate hashes for a single image, all images for a product, or even an entire collection.
A Community Contribution
A special thanks to Daniel Biegler for creating and sharing this useful, open-source solution with the Vendure community.
Share this article