Blurhash: A compact representation of a placeholder for an image

These blurry images look like they are composed of a couple of gradients.<p>Wouldn&#x27;t it be possible to generate a tiny SVG or some CSS that reproduces these gradients?<p>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.<p>Is there a library that does that?

I wish something like this was used for the Signal message history, similar to what WhatsApp does. As it is now, you either have an ever growing message database full of pictures you don’t need to keep around, or you start deleting them and end up with weird gaps in your message history. Keeping a few bytes of data as a placeholder for deleted images would be optimal in my opinion.

Not sure why I would want to use this instead of progressive image decoding with a (CSS?) blur filter. Instead of a blurred image suddenly flashing to a fully loaded image, the user would see the image quality gradually improve as it loads over the network.<p>Then again, progressive JPEG or FLIF is not supported that well anywhere, so I guess this could be the best thing right now because it seems to just require HTML5 canvas.

Previous discussion: <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=22374825" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=22374825</a><p>Wonder if anyone&#x27;s turned Instagram&#x27;s version of Blurhash into a library?

I am using blurhash on my photography website and it works and looks great. But given all the examples and libraries out there, more DIY work than expected was required to implement the main use case for blurhash end-to-end in vanilla JS.

DCT based algo, nice! But what&#x27;s wrong with using just 4 pixels to represent an image and then blurring that in CSS?

What are memory and CPU costs of using this in web pages? For example, when a page with 100 images loads, won&#x27;t decompressing hashes into 100 canvases take lot of resources and block the page or entire system for several seconds?<p>The placeholders are blurred and I assume that creating blurred images is pretty expensive and takes O(N^2*M) where N is size of the image and M is number of points.<p>Wouldn&#x27;t it be cheaper to use blocky placeholders that take only O(N^2) time to paint?

Something related somehow, from 13 years ago, to fit an image in the (then) 140 characters on Twitter: <a href="https:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;quasimondo&#x2F;3518306770" rel="nofollow">https:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;quasimondo&#x2F;3518306770</a>

I really dislike these and similar super blurry image replacements. They look ugly to me. Just use one color until the image loads, that&#x27;s way simpler and doesn&#x27;t look worse than these.

Is the space savings of using a custom base83 encoding really worth it when modern browsers can natively support base64 image encodings?

Do websites still use progressive JPEGs? The blurhash is much smaller than the data needed to render a progressive JPEG&#x27;s first pass, but would the progressive rendering on top of the blurhash still be worthwhile on today&#x27;s fast networks?

I&#x27;ve seen something similar before, where a specific JPEG header and specific quantization matrices was added to user-provided binary data to make the very low-res images. That method uses the native JPEG decoder, so it&#x27;s fast.

I was hoping this would include the unblur animation that wolt uses in their app.<p>It’s a joy to use when it resolves those placeholders piece by piece into the original