Moving from Blurhashes to Thumbhashes

In Portal we use (abuse) blurhashes extensively on the client. We Use them for many UI flourishes, including:

• Placeholders whilst full-res images are loading
• transitions between images and solid backgrounds
• shadow/glow colour tinting on hover

We’ve found them to be a great tool to improve the App experience but we’ve never been 100% happy with the appearance of the hashes for some of our images, we often find they have large dark areas or undesirable artifacts. We’d been discussing finding a better solution internally for a while so this week I was excited to stumble accross the thumbhash alogithm.

We use Elixir on the backend so I got to work using Rustler to bridge from Elixir land to the Rust implmentation. It was also a great excuse to play with Vix / libvips too. The code is open source and available on GitHub but not it’s not in the hex package index yet.

You can instead add the thumb_hash package like this:

def deps do
  [
    {:thumb_hash, gitub: "portal-labs/thumb_hash"}
  ]
end

And then start generating thumbhashes with:

ThumbHash.generate_base64_hash!("/path/to/my-image.jpg")

We are running it in beta currently but performance seems to be pretty good so far. 🤞

Next up we had to add support for rendering them on the client, this was super easy as there is already a Swift implmentation of the algorithm available that supports both AppKit and UIKit. After a little wrapping and refactoring we were all switched over.

Since making the switch from Blurhashes to Thumbhashes the difference is quite noticable, gradients are smoother, loading states are clearer and the harsh dark blobs are much reduced. So far we are very happy with this change.