5 ms·

Forgot to mention one important detail: How big is the JavaScript source to the BlurHash decoding algorithm? I'm guessing that it's approximately the size of a

by smlacy 7y ago

Forgot to mention one important detail: How big is the JavaScript source to the BlurHash decoding algorithm? I'm guessing that it's approximately the size of a single image, possibly quite a bit more.

hombre_fatal 7y ago
22kb Edit: Nevermind, derp, https://blurha.sh/blurhash.01ae00eea611ada5e9c7.js https://blurha.sh/blurhash.01ae00eea611ada5e9c7.js contains all of the JS of the entire website.
- lvh 7y ago
  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 ;)
- DagAgren 7y ago
  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.
  - hombre_fatal 7y ago
    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 https://blurha.sh/blurhash.01ae00eea611ada5e9c7.js Of course, my first clue should have been that it was also the only Javascript file.
lvh 7y ago
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.)
- sudhirj 7y ago
  There's a pretty awesome project that does this with SVGs. https://pkg.go.dev/mod/github.com/fogleman/primitive https://pkg.go.dev/mod/github.com/fogleman/primitive https://primitive.lol/ 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
  - DagAgren 7y ago
    That looks great! You could probably devise a much smaller data representation too, to get the size down.
    - sudhirj 7y ago
      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.
  - darkmighty 7y ago
    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 http://i.imgur.com/Cb4ecUC.gifv
DagAgren 7y ago
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.
switz 7y ago
1.9kB, minified and gzipped. Well within the parameters for cost savings. https://bundlephobia.com/result?p=blurhash@1.1.3 https://bundlephobia.com/result?p=blurhash@1.1.3

by smlacy 7y ago

hombre_fatal 7y ago

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

lvh 7y ago
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 ;)
DagAgren 7y ago
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.
- hombre_fatal 7y ago
  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 https://blurha.sh/blurhash.01ae00eea611ada5e9c7.js Of course, my first clue should have been that it was also the only Javascript file.

lvh 7y ago

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.)

sudhirj 7y ago
There's a pretty awesome project that does this with SVGs. https://pkg.go.dev/mod/github.com/fogleman/primitive https://pkg.go.dev/mod/github.com/fogleman/primitive https://primitive.lol/ 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
- DagAgren 7y ago
  That looks great! You could probably devise a much smaller data representation too, to get the size down.
  - sudhirj 7y ago
    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.
- darkmighty 7y ago
  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 http://i.imgur.com/Cb4ecUC.gifv

DagAgren 7y ago

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.

switz 7y ago

1.9kB, minified and gzipped. Well within the parameters for cost savings. https://bundlephobia.com/result?p=blurhash@1.1.3 https://bundlephobia.com/result?p=blurhash@1.1.3