search

evanw / thumbhash

A very compact representation of an image placeholder
https://evanw.github.io/thumbhash/
MIT License
3.49k stars 69 forks source link

Using the sample images for a comparison #11

Closed jwagner closed 1 year ago

jwagner commented 1 year ago

Hey Evan,

Cool project. :) I was curious how thumbhash would compare to just ripping out the scan out of a single block (8x8) JPEG, similar to the potato WebP examples. I hacked together a very quick demo of it. Could I reuse your images for a comparison? How are they licensed?

evanw commented 1 year ago

Yeah, sure thing. Thanks for asking. All of the non-transparent images are mine, and you can do whatever you want with them (edit: public domain). The transparent images originate from here and here.

signalwerk commented 1 year ago

@jwagner if you can share your findings that would be awesome.

jwagner commented 1 year ago

@jwagner if you can share your findings that would be awesome.

@signalwerk

My preliminary results looked really promising. Then I realized that I had ignored the custom huffman tables when ripping out the JPEG block out of the file. Successfully fooled myself until I tried decoding the blocks, at which point I realized my error rather quickly. ;)

After switching to a JPEG implementation with static huffman tables the results weren't quite so stellar anymore. At least according to my eye balls slightly better than thumbhash but also slightly larger. The next step would now be to optimize the static huffman tables used to see how close that gets to the dynamic/per image ones. I haven't decided whether I want to climb down that rabbit hole yet. :)

The jpeg approach has a nice side effect though - turning the thumbnail back into a jpeg or data uri is just string concatenation. Even when turned into a JPEG in an API (so clients would get back ready to use data uris), the resulting images will still compress quite nicely since they all share exactly the same prefix and suffix.

Over all though, I think thumbhash is pretty sweet as is. The implementation is simple enough, the good compression is good there isn't much more to ask for. :)

An even simpler approach which I've implemented in dont-crop is just fitting a linear gradient. That is even more compact, and looks quite clean.

signalwerk commented 1 year ago

@jwagner thank you for the explanation and the tests! I like the ThumbHash idea a lot. But for my use case I often want to inline a file without dealing with an external library to make it then readable for the browser. Therefore, I thought it would be nice to have the minimal JPEG and even if it's a bit bigger in file-size, I wouldn't mind. If you do any further research on it, I'm trust on the github-follower-functionality, so I will get a notification if you create a repo. 🤓