4 ms·
These blurry images look like they are composed of a couple of gradients. Wouldn't it be possible to generate a tiny SVG or some CSS that reproduces these grad
by nikeee 4y ago
These blurry images look like they are composed of a couple of gradients.
Wouldn't it be possible to generate a tiny SVG or some CSS that reproduces these gradients?
In that case, basically no decoding step is needed and integration is as easy as setting a CSS style on a div or including an SVG. If the image dimensions are set from the start, the browser can even continue layouting the page before actually drawing the gradients. Letting the browser decode the gradients should also be much faster.
Is there a library that does that?
- jesuscript 4y agoSomeone can correct me, but gradients and large box shadows are some of the most intensive things your browser can render. There was noticeable slowdown when you do too much of that.
- notpushkin 4y agoThere certainly is an SVG thing but I don't remember the name. I think Blurhash is the way it is because Wolt is an app and not a website, so the decoder is already loaded when you open it. For browser use, SVG would be more straightforward.
- mark-r 4y agoSVG would be much larger for the same image, it's XML based.
- SergeAx 4y agoIt would be nice if there was a way to translate/transcode Blurhash directly to SVG with a small piece if TS code.
- notpushkin 4y agoTrue, but we have GZip for that, and you don't need a lib to parse it. Actually, it would be nice to compare the overall size needed for both Blurhash lib + a bunch of hashes vs a bunch of SVG placeholders glued together.
- wongarsu 4y agoAt that point, why not just create a 6x3px thumbnail in a format of your choice and let interpolation take care of the gradients.
- fold_left 4y agoI had a go at doing this in Rust some time ago https://github.com/JamieMason/blurhash-to-css https://github.com/JamieMason/blurhash-to-css and there is also https://plaiceholder.co/ https://plaiceholder.co/.
- warpech 4y agoNice! A CSS Houdini worklet would be another way to represent this in CSS. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Houdini https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Houdini https://houdini.how/ https://houdini.how/
- michaelmior 4y agoInteresting idea using Houdini, although I think browser support isn't really good enough yet to justify this.
- wiredearp 4y agoSupposedly some library called SQIP might handle that as explained over on https://medium.com/free-code-camp/using-svg-as-placeholders-more-image-loading-techniques-bed1b810ab2c https://medium.com/free-code-camp/using-svg-as-placeholders-...