Image Blurry Placeholder

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.