Published on

Amazing image placeholders with blurhash

3 min read


Few weeks ago I was playing around with Wolt iOS app, I was really impressed by how the app handled image load and placeholders. After looking around I finally found Blurhash

Why would I need it?

Blurhash can help with transforming boring image placeholders into something more.



Using with TypeScript and React


yarn add blurhash

Encode an image

import { encode } from 'blurhash';

const loadImage = async (src: string): Promise<HTMLImageElement> =>
  new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = (...args) => reject(args);
    img.src = src;

const getImageData = (image: HTMLImageElement): ImageData => {
  const canvas = document.createElement('canvas');
  canvas.width = image.width;
  canvas.height = image.height;
  const context = canvas.getContext('2d');
  context.drawImage(image, 0, 0);
  return context.getImageData(0, 0, image.width, image.height);

const encodeImage = async (url: string) => {
  const image: HTMLImageElement = await loadImage(url);
  const imageData: ImageData = getImageData(image);
  return encode(, imageData.width, imageData.height, 4, 4);

Store blurhash alongside your images

When storing images to S3 bucket, I usually run encode function on the image from S3 and store it alongside the image url in the database so that it's easier.

Personally I store image in it's own object representation as follows:

"image": {
  "url": "",
  "blurhash": "LKO2?U%2Tw=w]~RBVZRi};RPxuwH"

Using with React

After storing the hash on the server, it's quite easier to use it with React without any manual decoding with react-blurhash.

import { BlurhashCanvas } from 'react-blurhash';


Note: you can also decode the hash manually, checkout blurhash docs for more details

Experiment online!

There's an online generator available if would like to try it out yourself.


Happy Coding 🎉

© 2024 Karan Pratap Singh