CSS Gradient Image Placeholders (ie CSS-only Blur/Thumbhash)

[nickchomey]

Feature Description

The Image Placeholders plugin correctly rejected proposals for using BlurHash or ThumbHash, because those require client-side JS.

This article introduces a genius approach to doing high quality LQIP (like BlurHash/ThumbHash), but without any JS. It just uses some fancy CSS - Gradients, variables, oklab colorspace.

I had been working on porting it to php and integrating it with WordPress, when I found the Image Placeholders plugin which does most of the necessary integration work. I'm nearly done integrating this effort into that feature plugin and will share a PR soon.

It requires a negligible amount of extra overhead on the server to generate the lqip values, and acutally leverages the existing dominant color mechanism.

Here's a couple videos of what I have working within a WP site with a gallery block (and some optionally-applied css to allow for hovering to reveal the placeholder).

Before:

Kooha-2026-06-04-15-19-32.mp4

After:

Kooha-2026-06-04-15-00-36.webm

[nickchomey]

Also, the Client Side Media iteration for 7.1 mentions perhaps implementing BlurHash. This won't be necessary if the functionality here can be merged (and especially into Core). Moreover, i have been working in parallel on implementing libvips - the same tool being used for the Client Side effort - both in general and for these placeholders. So, it should be easy for all of this to be done client side as well.