Drupal is a registered trademark of Dries Buytaert
cms 2.1.3 — Update released for Drupal core (2.1.3)! drupal 10.5.11 — Update released for Drupal core (10.5.11)! drupal 11.3.11 — Update released for Drupal core (11.3.11)! drupal 11.2.13 — Update released for Drupal core (11.2.13)! drupal 10.6.10 — Update released for Drupal core (10.6.10)! cms 2.1.2 — Update released for Drupal core (2.1.2)! drupal 11.1.10 — Update released for Drupal core (11.1.10)! drupal 10.5.10 — Update released for Drupal core (10.5.10)! drupal 10.4.10 — Update released for Drupal core (10.4.10)! drupal 11.2.12 — Update released for Drupal core (11.2.12)! drupal 11.3.10 — Update released for Drupal core (11.3.10)! drupal 10.6.9 — Update released for Drupal core (10.6.9)! drupal 10.6.8 — Update released for Drupal core (10.6.8)! drupal 11.3.9 — Update released for Drupal core (11.3.9)! drupal 11.3.8 — Update released for Drupal core (11.3.8)! drupal 11.3.7 — Update released for Drupal core (11.3.7)! drupal 11.2.11 — Update released for Drupal core (11.2.11)! drupal 10.6.7 — Update released for Drupal core (10.6.7)! drupal 10.5.9 — Update released for Drupal core (10.5.9)! cms 2.1.1 — Update released for Drupal core (2.1.1)!
← All modules

image_blurry_placeholder

26 sites Security covered
View on drupal.org

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:

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.

Activity

Total releases
3
First release
Mar 2025
Latest release
5 months ago
Release cadence
134 days
Stability
67% stable

Release Timeline

Releases

Version Type Release date
1.2.0 Stable Dec 18, 2025
1.1.0 Stable Mar 25, 2025
1.0.x-dev Dev Mar 25, 2025