Minimal CSS-only blurry image placeholders

@slightlyoff @kurtextrem that is very cool indeed

Some upfront processing, ease of implementation on each tag? My favorite kind

I added a link to my notes about this kind of front end tricks

https://github.com/GuillaumeRossolini/il/blob/master/2-FRONTEND.md

il/2-FRONTEND.md at master · GuillaumeRossolini/il

Collection of tips to improve web page loading times - GuillaumeRossolini/il

GitHub

@GuillaumeRossolini @slightlyoff

Here's a good article that you could add to your list, which summarizes the options and concludes that lqip images are probably a better options than blurhash/thumbhash. https://www.mux.com/blog/blurry-image-placeholders-on-the-web

But this css-only approach seems to be the holy grail - essentially 0 data transferred, instant rendering, good-enough/comparable placeholder image fidelity!

A clear look at blurry image placeholders on the web | Mux

Algorithms like BlurHash and ThumbHash are popular ways to render small, blurry images while the full-size images load, but are they necessary on the web?

@nickchomey thanks, I’m ok not knowing every technique in between though 😄 and my list is a decade old so there’s that
@GuillaumeRossolini haha, fair enough. I had the link in my not-as-old list, so thought I'd share it while I added this new one to it