Drupal is a registered trademark of Dries Buytaert
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)! drupal 11.3.6 — Update released for Drupal core (11.3.6)! drupal 10.6.6 — Update released for Drupal core (10.6.6)! cms 2.1.0 — Update released for Drupal core (2.1.0)! bootstrap 8.x-3.40 — Minor update available for theme bootstrap (8.x-3.40). menu_link_attributes 8.x-1.7 — Minor update available for module menu_link_attributes (8.x-1.7). eca 3.1.1 — Minor update available for module eca (3.1.1). layout_paragraphs 2.1.3 — Minor update available for module layout_paragraphs (2.1.3). ai 1.3.3 — Minor update available for module ai (1.3.3). ai 1.2.14 — Minor update available for module ai (1.2.14). node_revision_delete 2.0.3 — Minor update available for module node_revision_delete (2.0.3). moderated_content_bulk_publish 2.0.52 — Minor update available for module moderated_content_bulk_publish (2.0.52). klaro 3.0.10 — Minor update available for module klaro (3.0.10). klaro 3.0.9 — Minor update available for module klaro (3.0.9). layout_paragraphs 2.1.2 — Minor update available for module layout_paragraphs (2.1.2). geofield_map 11.1.8 — Minor update available for module geofield_map (11.1.8).
← All modules

image_blurry_placeholder

28 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
4 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