Improve User Experience with Blurhash Algorithm

Overview

We'll concentrate on one of the picture optimization techniques in this article: employing image placeholders. We'll show you how to use the BlurHash Algorithm method to make image placeholders in particular.

What is Image Placeholder

Page speed and user experience can be significantly impacted by having too many images in your app or by having images that are very huge and load slowly. In fact, one of the biggest factors in how quickly your program runs is definitely the use of graphics.

We can utilize placeholders for some of the images in an app instead of reducing the overall amount of images to lower the initial load of image files.

A placeholder image is a fake image that the browser can load initially to serve as the real image while waiting for the real image to download. Because placeholders have a far smaller file size than the actual image they represent, they help improve page speed. Moreover, image placeholders might stop layout changes on websites.

What is BlurHash

By using the BlurHash algorithm to create a blurred version of the image, we can build a more aesthetically pleasing design for the image placeholder.

The procedure entails creating a string of characters that encode an erroneous representation of the image, the quantity of characters generated is based on the image quality.

You can provide the BlurHash string directly into the HTML of your website and have it decoded into the blurred image without having to search for and download an image file.

How does BlurHash work?

BlurHash applies a simple DCT (Discrete Cosine Transform) to the image data, keeping only the first few components, and then encodes these components using a base 83 encoding, with a JSON, HTML and shell-safe character set.

Structure of the BlurHash String

Here follows an example of a BlurHash string:

Example: LlMF%n00%#MwS|WCWEM{R*bbWBbH

1. Number of components (1 digit) - For a BlurHash with nx components along the X axis and ny components along the Y axis
2. Maximum AC component value (1 digit) - All AC components are scaled by this value
3. Average colour (4 digits) - The average colour of the image in sRGB space
4. AC components (2 digits each) - The AC components of the DCT transform

Base 83 Encoding

A custom base 83 encoding is used with the character set:

0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~

Blurhash Implementation in Next.js

For dynamic images in a Next.js app, add the placeholder attribute with 'blur' as value:

import Image from "next/image";

const featuredWorks = [
  {
    img: "/static/images/projects/featured/buka.png",
    imgBlur: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...",
    title: "Bukalapak",
  },
];

function ProjectCard({ project }) {
  return (
    <Image
      src={project.img}
      placeholder="blur"
      blurDataURL={project.imgBlur}
      alt={project.title}
      width={400}
      height={300}
    />
  );
}

I personally use blurred.dev as a BlurHash data URL generator. For production use with dynamic images, you can use the official BlurHash libraries to encode and decode on the fly.

Performance Benefits

Using BlurHash provides several benefits:

1. Reduced Cumulative Layout Shift (CLS) - The placeholder reserves space for the image
2. Better perceived performance - Users see a preview immediately
3. Smaller payload - BlurHash strings are typically 20-30 characters
4. Progressive enhancement - Works without JavaScript for the placeholder

Conclusion

BlurHash is an elegant solution for improving perceived load times and user experience when loading images. The implementation is straightforward with Next.js and provides immediate visual feedback to users.