Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Minimal CSS-only blurry image placeholders

leanrada.com

Post reply on HN
Print view View original

41–50 of 78 posts

Re: Minimal CSS-only blurry image placeholders

#42

Post by diiiimaaaa »

emsixteen wrote: post #39

Forgive 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…

These placeholders are generated by processing the image on a server beforehand. Generally they create some html, css or svg markup that is served inline. Having to do a separate request for such placeholder is very bad idea.

It's not clear if these placeholders do actually help, especially placeholders with very low quality. In my opinion, they only add visual noise.

I'd focus more on avoiding layout shifts when images load, and serving images in a good format (avif, webp) and size (use `srcset` or ``).

Re: Minimal CSS-only blurry image placeholders

#43

Post by whstl »

VladVladikoff wrote: post #20
simonw wrote: post #12

Earlier quoted context omitted.

Worked for me in Mobile Safari in iOS on my iPhone.

Maybe it’s iOS version dependant. I’m a bit out of date (on purpose for jailbreak) and the demo is broken for me.

I'm up to date and it's broken for me :/

Re: Minimal CSS-only blurry image placeholders

#44

Post by rckt »

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.

Re: Minimal CSS-only blurry image placeholders

#45

Post by mattdesl »

Really like this, nice work!

Something to note is that Color Theif (Quantize) is using median cut on RGB, it would be interesting to try and extract dominant color in OKLab instead.

I also love the idea of a genetic algorithm to find an ideal match for a given image; it should be possible to simulate radial gradients server & client side with webgpu, but probably overkill for such a simple task.

EDIT: Although it works for me in Chrome, it doesn't seem to work in Safari v16.1.

Re: Minimal CSS-only blurry image placeholders

#46

Post by pavlov »

rckt wrote: post #44

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.

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.

Re: Minimal CSS-only blurry image placeholders

#48

Post by mary-ext »

rckt wrote: post #44

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.

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.
Post reply on HN