Image Blurry Placeholder
This module adds an option to image field formatters to display a blurry placeholder image while the actual image is loading, improving perceived performance. It works by creating a scaled-down version of the image as a background for the img element, with an optional experimental feature to add a CSS blur effect using JavaScript.
Adds an option to common image field formatters to display blurry placeholders of images while they are being loaded by the browser.
How to use it
To enable this feature for an image field, check the 'Use blurry placeholder' option under your image formatter. Supported formatters:
- Thumbnail (core Media module)
- Image (core Image module)
- Responsive image (core Responsive image module)
- Easy Responsive Images
- Media Responsive Thumbnail
For Drupal 9, the following patch is recommended if you are using this with responsive images: #3267870: Order image mappings by breakpoint ID and numeric multiplier.
How it works
The module creates an image style with a 20px width scale filter. Before displaying images, a version using this style is created and added as a background-image on <img> elements.
You can play around with that image style and add extra effects if you feel like it.
Experimental: You can also enable JS/CSS blur in the module configuration screen (Admin > Config > Media > Image Blurry Placeholder Settings). A JavaScript library will add the .loading class on image elements while they are loading and some CSS blur effect will be added to those images.