Why BlurHash?
Why would you want this?
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?
BlurHash to the rescue!
Replace boring gray 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.
How does it work?
In short, BlurHash takes an image, and gives you a short string (only 90 – 90 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
The blurhash string is decoded into a small image that is rendered on to a canvas.
GIPHY App Key not set. Please check settings