Top
Best
New

Posted by ChiptuneIsCool 3/30/2025

Minimal CSS-only blurry image placeholders(leanrada.com)
470 points | 75 commentspage 4
ipunchghosts 4/3/2025|
I know very little of css and to me it seems like a configuration file for rendering text, similar to changing default fonts ornsizes for matplotlib plots using plt.rcParams. How does this do inage blurring then?
teraflop 4/3/2025||
If you read the article, it explains exactly how the technique works.

One of the many ways CSS allows you to customize formatting is to change the background style of elements. In addition to just using a solid color or image, you can specify a procedural gradient. And by superimposing several such gradients, you can make a very blurry approximation of an image.

CSS also includes a basic expression language which allows evaluating simple arithmetic expressions. So you can encode all the blurred image's parameters as a packed integer in a single compact CSS property per image, and use rules to define the gradients in terms of that integer.

Note that CSS is not used to compute the blurred image representation itself -- you have to do that separately. (Even if you could do it in pure CSS, the whole point is to show a blurred preview image before the image itself is downloaded to the browser, so doing it in CSS would defeat the purpose.)

maxbond 4/3/2025|||
> [It] seems like a configuration file for rendering text...

A more accurate mental model might be, "a declarative language for styling HTML elements," where "styling" is very broad. You can make user interfaces that show and hide elements, have animations, etc. triggered by clicking buttons without a single line of JavaScript. It's a lot more powerful than the configuration parameters to plotting functions, in my book it's a programming language rather than a configuration language.

rckt 4/3/2025|
Nice, but... it's not actually minimal. But nice.

Also a bit of nitpicking. While it provides a visual placeholder for an image that's being fetched, it does not reflect its content. So, when it's loaded we can see a completely different color palette and shapes.

tempoponet 4/3/2025||
I see two issues, let's say "opportunities":

First is the limitation to one hue value. Something like the Sunflower (blue + yellow) is just yellow. Maybe there's a tradeoff that could pack more hue but with less luminescence.

The second is how the primary color is selected. Several images (plant on grey background, street food vendor) appear to be averaging across the image and getting a grey value. By selecting better for the predominant color and its placement, the greys would appear on their own.

pavlov 4/3/2025|||
What do you mean? In my opinion this library does a very good job of representing the image’s color palette considering it’s encoded into a single integer. (Even smaller than usual because of CSS limitations, only 20 bits!)

You don’t even need JavaScript to decode that integer into the image. The underlying CSS may be complex, but for the user of the library it definitely feels minimal in a good way.

rckt 4/3/2025||
In the gallery https://leanrada.com/notes/css-only-lqip/gallery/ there's a good example of what I mean - the bottom right image or 4th from the end. A completely different image in comparison to the gradient.

As for the minimalism, I understand what you mean. But I understood the "minimal" part in regard to implementation, not usage. If we only mean usage, we can say the same about a lot of libs, that they are minimal. Yeah, it's minimal for the end user, but under the hood it is not as minimal. It's not anything bad, it's just how I interpreted the title.

mary-ext 4/3/2025||
That's pretty much an issue with every LQIP solutions though, including BlurHash and ThumbHash. The only thing that matters is that it's close enough to the real thing, since they're meant to serve as placeholders.