BlurHash
BlurHash is a compact representation of a placeholder for an image.
More on our blog
Does your designer cry every time you load their beautifully designed screen, and it is full of empty boxes because all the images have not loaded yet? Does your database engineer cry when you want to solve this by trying to cram little thumbnail images into your data to show as placeholders?
Replace boring grey boxes with beautiful blurhash states and the designers will be happy. Blurhash strings are short enough to be added as a field in a JSON object and to be stored in a database. The implementations are small and easy to port to new languages, and the end result is a smooth and interesting experience for your users.
In short, BlurHash takes an image, and gives you a short string (only 20-30 characters!) that represents the placeholder for this image. You do this on the backend of your service, and store the string along with the image. When you send data to your client, you send both the URL to the image, and the BlurHash string. Your client then takes the string, and decodes it into an image that it shows while the real image is loading over the network. The string is short enough that it comfortably fits into whatever data format you use. For instance, it can easily be added as a field in a JSON object.
Pick image or upload your own
BlurHash string
The blurhash algorithm encodes your image into the short string above, ready to save in a database
Result
The blurhash string is decoded into a small image that is rendered on to a canvas.
The same exported data can be used on all platforms. Get the BlurHash library for your platform of choice.
More on GitHub