blurhash

BlurHash solves a small but visible problem in apps and websites: when a screen is full of images that haven't finished downloading yet, you stare at empty boxes. BlurHash gives you something pretty to show in their place — a blurry, color-correct preview of each image — without having to send any actual thumbnail data over the network.

The trick is that BlurHash turns an image into a very short string, only 20 to 30 characters long. You compute that string on the backend once, when you store the image, and save it next to the image record. When your app or website fetches the image's metadata, it gets back the URL plus this little string. The client code decodes the string back into a small blurry image and shows it as a placeholder while the real image is loading. Because the string is so short, it fits comfortably inside the same JSON or database field you would already be using. The full technical description is in an Algorithm.md document the README points to; the algorithm itself is short, under two hundred lines of code, which is why it has been ported to many languages.

The repository contains official encoder and decoder implementations in C, Swift, Kotlin, TypeScript, and Python, plus a long list of community ports including Go, PHP, Java, Rust with WebAssembly, Ruby, Dart, .NET, Elixir, Haskell, React Native, Kotlin Multiplatform and more, so there is almost certainly a usable version for whatever stack you are on. For best performance, you scale your image down before encoding and decode at very small sizes (around 20-32 pixels wide) and let the UI scale them up. Wolt (the company behind it), Mastodon, Signal, and Jellyfin are all listed as users.