This is pretty neat
Minimal CSS-only blurry image placeholders
31–40 of 78 posts
Re: Minimal CSS-only blurry image placeholders
#32Earlier quoted context omitted.
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?
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.
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.
Re: Minimal CSS-only blurry image placeholders
#33Earlier quoted context omitted.
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?
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.
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?
Re: Minimal CSS-only blurry image placeholders
#34cool, but the fact that you can now do this with CSS is part of the reason that a new browser engine is so unlikely - one of 100000 things that css can do now and need to be supported :(
Maybe we should have kept CSS simple and JS optional. Maybe we took a few wrong turns...
Re: Minimal CSS-only blurry image placeholders
#35Earlier quoted context omitted.
The half blue / half green image still looks better with LQIP than BlurHash. I was getting ready to use BlurHash in my app, might try this instead! In fact, LQIP looks better than most of the BlurHash examples in the gallery ( https://leanrada.com/notes/css-only-lqip/gallery/ ); not sure if these were cherry picked or what.
Author here: Definitely cherry picked ;) I did deliberately pick some "bad" examples like the blue+green image, and other multicolor images. I wanted to add an upload function so people could test any image, then i realised I'd have to implement the compression/hashing in the client. Maybe i should!
I tried getting that working earlier using Claude to convert your script - you can see the result here: https://claude.site/artifacts/b747d94a-2923-4904-8ed1-7330bf...
Here's the transcript and code: https://claude.ai/share/4a562082-b681-4f0c-909c-3c32c34fd050
Re: Minimal CSS-only blurry image placeholders
#36I 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 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?
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.
Re: Minimal CSS-only blurry image placeholders
#37broken on iOS (iPad)
Also broken for me:
Safari 18.0 (20619.1.26.31.6), macOS Sequoia 15.0
Re: Minimal CSS-only blurry image placeholders
#38I 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.…
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...
Re: Minimal CSS-only blurry image placeholders
#39Forgive my ignorance, feel like it's embarrassing to ask here to be honest, but can someone explain how this helps/works? I've never actually used these placeholders, but I always imagined that they work by processing the image beforehand on the server and using something like a super low quality image or gradient or such as the placeholder. If this is done in pure CSS, does the browser not need to download the image first to figure out what's in it, before then doing the placeholder effect? Perhaps it doesn't help that I've not had my morning coffee yet, but I don't understand.
Re: Minimal CSS-only blurry image placeholders
#40Forgive my ignorance, feel like it's embarrassing to ask here to be honest, but can someone explain how this helps/works? I've never actually used these placeholders, but I always imagined that they work by processing the image beforehand on the server and using something like a super low quality image or gradient or such as the placeholder. If this is done in pure CSS, does the browser not need to download the image…
It’s still computed at build time or dynamically, by a programming language. The “pure CSS” part of it means that the hash is decoded into something visual by CSS without any JavaScript required.