Live data from Hacker News

ThumbHash: A better compact image placeholder hash

evanw.github.io

91–100 of 123 posts

Re: ThumbHash: A better compact image placeholder hash

#91

I think they should siply use four patches of BC1 (DXT1) texture: https://en.wikipedia.org/wiki/S3_Texture_Compression It allows storing a full 8x8 pixel image in 32 Bytes (4 bits per RGB pixel).

> 4 bits per RGB pixel

That sounds inferior. From the article:

> ThumbHash: ThumbHash encodes a higher-resolution luminance channel, a lower-resolution color channel, and an optional alpha channel.

You want more bits in luminance. And you probably also don't want sRGB.

Re: ThumbHash: A better compact image placeholder hash

#92

Earlier quoted context omitted.

The claim being that the act of concatenating some bytestrings together is a massive time sink?

Decode from base64 json, concat, convert to a Blob, createObjectURL and feed back into an img? That's about the simplest way I can think to do it. Either that or blip it onto a canvas. Or convert it back to base64 in the form of a data-URI.

No reason to transfer the image data in JSON, just read the response as an ArrayBuffer. Pass over that and write it into a dataURI with the needed modifications in a single go.

Re: ThumbHash: A better compact image placeholder hash

#93

Earlier quoted context omitted.

The claim being that the act of concatenating some bytestrings together is a massive time sink?

Decode from base64 json, concat, convert to a Blob, createObjectURL and feed back into an img? That's about the simplest way I can think to do it. Either that or blip it onto a canvas. Or convert it back to base64 in the form of a data-URI.

I just recently did some work in a much less sophisticated area of this. For folks who want to efficiently juggle image data into and out of canvas, ImageBitmap is a little known web API that does it very well. Unlike most web APIs dealing with binary data that interfaces with user interaction, you can use it synchronously, and it’s vastly more efficient than juggling base64-blobs-URLs.

Re: ThumbHash: A better compact image placeholder hash

#95
love these type of optimizations... blurhash seems to be giving me more pleasant results that thumbhash on the few examples i ran through it! thumbhash seems to over emphasize/crystalize parts of the image and results in a thumbnail that diverges from the source in unexpected ways.

either way this is awesome, and thanks for sharing

Re: ThumbHash: A better compact image placeholder hash

#96
I'm a big fan of anything that can make networked experiences a little smoother. When you're having to deal with less than amazing connections pages full of loading spinners and blank spots get old fast.

Also, love that this comes with a reference implementation in Swift. Will definitely keep it in mind for future projects.

Re: ThumbHash: A better compact image placeholder hash

#97
post #81
post #69

Earlier quoted context omitted.

I think this is very much a one way operation, which would imply some form of hash?

regular (non-secure) hash functions do two things: they compress (very lossily) and they make things that are near each other in their domain (inputs) map to things that are far apart in their codomain (outputs). the first condition is satisfied, but the second is definitely not!

Perceptual hashing wouldn't seem to satisfy your second requirement there, either.

Re: ThumbHash: A better compact image placeholder hash

#98
A single file with a few functions, it seemed a good test to convert it to some other languages with GPT-4 (I tried Python and Ruby). Unfortunately, my access to GPT-4 is limited to the 2k version, and the first function is 4,500 tokens (800 minified, but losing names, comments, and probably the quality of the conversion).

With some language-independent tests in such a repository, you might be able to semi-automatically convert the code into different languages, and continue with code scanning and optimizations.

Anyway: very nice work!

Re: ThumbHash: A better compact image placeholder hash

#99
post #3

What I’ve seen instagram and slack do is create a really small jpg and inline that in the API response. They then render it in the page and blur it while the full size image loads. Placeholder image ends up being about 1KB vs the handful of bytes here but it looks pretty nice Everything is a trade off of course, if you’re looking to keep data size to a minimum then blurhash or thumbhash are the way to go

As far as I know just about any file format other than JPEG is better at this. If I recall correctly you basically want to go with GIF if your thumbnail has less than 255 pixels total.
Post reply on HN