Minimal CSS-only blurry image placeholders

Posted by ChiptuneIsCool 3/30/2025

Minimal CSS-only blurry image placeholders(leanrada.com)

469 points | 75 commentspage 3

Zensynthium 4/3/2025|

Love the website and article! Looks like even with CSS there's always new things to learn and do, good stuff.

thwarted 7 days ago||

No one remembers the lowsrc img attribute.

molszanski 7 days ago||

Amazing work! Thanks you for sharing!

davidmurdoch 4/3/2025||

This is brilliant!

jbverschoor 4/3/2025||

That's sexy!

seejayseesjays 4/3/2025||

this is super neat! love your site

superkuh 4/3/2025||

I suppose the existence of bad uses does not invalidate the good but it feels like 99% of blurry image placeholder behavior is actually just preventing people from seeing anything unless they also run the ad and spying javascript that monetizes the site.

So a CSS-only way is neat and indisputably better but I think it's missing the point? The point of blurry placeholders isn't to make things easier or display better. The point is to make things worse. This write up is definitely making things better.

simonw 4/3/2025||

The point of blurry placeholders is to support loading a page with potentially hundreds of images (maybe with additional lazy loading, which doesn't need JavaScript these days) without blocking display of the page on loading those full images.

I'm not sure why you think it has anything to do with forcing people to execute JavaScript?

wruza 4/3/2025|||

Can't speak for everyone ofc, but not sure if I ever wanted blurry placeholders when images load fast enough, or found them anything but annoying when not. I think these bells and whistles only serve as designer's self-affirmation.

simonw 4/3/2025|||

I've definitely wanted them on photo galleries with large numbers of thumbnails, and I appreciate them when they are implemented well, especially if I'm on a slow connection.

gblargg 4/3/2025|||

Agreed, they just create needless visual activity. How about a page specify where the images appear, and leave it up to the browser to decide how to show them and load them? Is that too simple and workable?

jasonkester 4/3/2025|||

Indeed. So the visitor need only wait for the 20mb javascript bundle, but not the 600kb of images, before he can see the 1kb of text that he visited the site to read.

simonw 4/3/2025||

Sounds like you're in favor of a version of blurry placeholders that's implemented in less than 1KB of CSS.

nirava 4/3/2025|||

It is really simple to make sure your blurred css placeholder is cosmetic, and a progressive enhancement. I would know, I wrote one a month ago for my personal site.

My goal was to have something that'd transmit all the essential bits of the site in the first 14kB, and worked basically on everything. It wasn't hard, honestly.

It wasn't a particularly complex site but i guess what I'm saying is any well done (and well intentioned) implementation of blurred image placeholders will works with or without JS. That is just sound engineering...

recursive 4/3/2025||

The placeholder is inline in the markup. It can be displayed before the image loads. Which is not inline. I have no idea what 99% thing you're talking about.

superkuh 7 days ago||

Look at literally any "newspaper" website. From the smallest local paper to the NYT.

recursive 7 days ago||

That's a whole separate thing with a different reason for existing.

naveed125 4/3/2025||

This is pretty neat

csdn1111 4/3/2025||

[dead]

benfortuna 4/3/2025|

..or use tailwind - https://tailwindcss.com/docs/filter-blur

jsheard 4/3/2025|

That's not at all equivalent to what the OP is doing. The point isn't just to blur an image, which is what those Tailwind classes do, the point is to render a very compact blurry version of an image which hasn't loaded yet.

More comments...