Implement preload blurred image as preloader until the image is not loaded.

Created on 13 April 2024, about 1 year ago

Hi, a good feature of "Image Sizes" module, which try to solve the same problem as "Drimage", is the blurred placeholder image which is set as base64 on src attribute until the real image is not fully loaded. The effect is quite nice and it could be implemented also on Drimage. What do you think about?

Currently the drimage-formatter.html.twig already contains a "dummy_image" which could be replaced with a blurred base64 version of the image.

I've created a proof of concept patch which works quite well (it currently relies to a image style which generate a small blurred webp version of the image).

If I will provide a patch, would be included in the module? Do you think it can be useful? Let me know.

Feature request
Status

Active

Version

2.3

Component

Code

Created by

🇮🇹Italy finex

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @finex
  • 🇧🇪Belgium weseze

    Very cool idea, if it is optional.
    I'm willing to review patch/MR if you have it.

  • 🇧🇪Belgium dieterholvoet Brussels

    You should take a look at the Image Blurry Placeholder module. Maybe integrating that module with Drimage would make more sense than to create a whole separate implementation here.

  • 🇮🇹Italy finex

    Hi, I'm using the following patch since last year on at least a dozen of website without any problem.

    Consider the patch as an example because assumes that an image style called default_preload exists.

    I'm also attaching an example of the image style settings.

Production build 0.71.5 2024