Man, it's wild how much you can do with CSS calculations. How long before someone makes a CSS-only Game Boy emulator?
Minimal CSS-only blurry image placeholders
71–78 of 78 posts
Re: Minimal CSS-only blurry image placeholders
#72Re: Minimal CSS-only blurry image placeholders
#73This is really cool, I love seeing folks use CSS in clever ways. :) My one feedback would be to avoid using attr selectors on the style attribute like [style*="--lqip:"]. Browsers normally lazy compute that string version of the style attribute [1], but if you use a selector like this then on every style recalc it'll force all new inline styles (ex. element.style.foo = bar) to compute the string version. Instead if y…
see also the author's last note on the upcoming parsing feature of `attr()`, which would solve both problems (performance and verbosity) at once:
I can't wait for the day when attr has this implemented. It would eliminate the need for so many inline styles
Re: Minimal CSS-only blurry image placeholders
#74Forgive 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 ima…
There are certainly legitimate cases where the placeholders come from a separate request. Most
CRDTs and similar sync engines you don’t want to (and/or are not allowed to) store binary images directly inside them, so you need to store references to some other blob storage. But Blurhash is a simple short string (and LQIP here is a simple integer) and those store well in CRDTs and other sync engines, so you can pair that with your reference pointer (which might not even be a URL depending on your blob storage engine and its sync mechanics and authorization schemes and whatever else) and whatever other metadata you want/need to include like width/height or aspect ratio and alt/title/caption.
When the CRDT or document sync engine inevitably sync much faster than your blobs you have something to show in that placeholder. If the blob sync fails for some reason, you still have something to show more interesting than your browser’s old broken image logo under your “Sync is slow or broken” warning.
I think placeholders help a bunch in situations like that where your image fetch is a lot more complicated than a URL that you can add in a `src` attribute. It’s also really easy to get into situations where such blob fetching is complex: In cases where you have to respect user and/or tenant privacy and need complex OAuth flows. In cases where you need end-to-end photo encryption. In cases where you need peer-to-peer sync and only P2P sync because you’ve been mandated to reduce touch points and likelihood of accidentally storing photos at rest in middle layers. Situations like images of HIPAA data, PII, PIFI, etc.
On a static site with public (or cookie sessioned) images direct linked by URL, yeah the placeholders don’t do much other than check certain design boxes. There’s lots of other places images (and their metadata) come from, and placeholders are a useful fallback in the worst cases.
Re: Minimal CSS-only blurry image placeholders
#75Man, it's wild how much you can do with CSS calculations. How long before someone makes a CSS-only Game Boy emulator?
I did find this Idle Game entirely in CSS amusing: https://lyra.horse/css-clicker/
Re: Minimal CSS-only blurry image placeholders
#76Earlier quoted context omitted.
Probably because of all of the wildly complex CSS calculations it's running, as described by the article.
Yep, there are a lot of layers and compositing operations (maybe more than necessary?). I suppose it could be simplified further.
Unusably slow for me on my Librem 5. I'm talking about two or three fps.
Re: Minimal CSS-only blurry image placeholders
#77Earlier quoted context omitted.
Cool app but no maintained library to use it in our own apps and scripts.
https://github.com/GoogleChromeLabs/squoosh
If you go to NPM the first thing it says in bold is "no longer maintained" and it links to the Google Chrome labs GitHub as well.
https://www.npmjs.com/package/@squoosh/cli#project-no-longer...
So to clarify, is the GitHub maintained but the npm distribution is not? Or is none of it maintained unless you use the website/app?
Re: Minimal CSS-only blurry image placeholders
#78This is really cool, I love seeing folks use CSS in clever ways. :) My one feedback would be to avoid using attr selectors on the style attribute like [style*="--lqip:"]. Browsers normally lazy compute that string version of the style attribute [1], but if you use a selector like this then on every style recalc it'll force all new inline styles (ex. element.style.foo = bar) to compute the string version. Instead if y…
Is this really a performance concern though?