1.9kB, minified and gzipped. Well within the parameters for cost savings.

https://bundlephobia.com/[email protected]

The algorithm is tiny, and will easily fit in less than an image's worth of data, especially if you minify it. Also, it is likely you have more than one image on any given website.

This is a great point! I wonder if it could be made much smaller by instead "vectorizing" the blur. Right now it appears to draw individual pixels, but perhaps it could draw a few large blurred gradiented circles instead?

(I also appreciate that this is probably me getting overexcited about this, since odds are the JS is cached, and in the case of mobile apps it doesn't matter much.)

There's a pretty awesome project that does this with SVGs.

https://pkg.go.dev/mod/github.com/fogleman/primitive https://primitive.lol/

I've used it in a project to generate vector thumbnails that are under 1KB that I can just base64 encode and send along with the general text of a page - so the page renders with the text and low-fi images, and then I can load the hi-fi ones as necessary.

The lo-fi images are art in themselves, sometimes I preferred them to the actual images :-P

The image animation (with randomized recreations) gives an amazing effect. I've never seen this technique before.

Like cinemagraphs, but unique and alive in a nice way.

http://i.imgur.com/Cb4ecUC.gifv

That looks great!

You could probably devise a much smaller data representation too, to get the size down.

Yeah, most of the size is the SVG XML cruft. The encoder uses only one kind of svg element with a standard set of attributes, so yeah, absolutely.

22kb

Edit: Nevermind, derp, https://blurha.sh/blurhash.01ae00eea611ada5e9c7.js contains all of the JS of the entire website.

Ironically jpegoptim is pretty happy to knock img1.jpg (woman eating donut) down from its original 55kB to 33kB with no perceptible-to-me quality loss though ;)

It is a lot smaller than that, that is probably the size of all JS code on the web page?

The algorithm itself fits into a few k.

Yeah, you're right. I found the first JS file in my network tab and judged by its blurhash.js filename that it was the algorithm: https://blurha.sh/blurhash.01ae00eea611ada5e9c7.js

Of course, my first clue should have been that it was also the only Javascript file.