Enhance Your Website's User Experience with BlurHash Image Placeholders

At imgix, we care deeply about user experience and page performance. Previously, we discussed lazy loading and its benefit on Core Web Vitals. Essentially, it defers offscreen images from loading until the visitor scrolls and the images enter the viewport. It allows fewer images to load at any given time and speeds up the load time for each image.

However, if not properly set up, lazy loading could increase the page layout instability, leading to a worse Cumulative Layout Shift metric, which is one of the three Core Web Vitals.

To improve page speed while minimizing Cumulative Layout Shift, the best solution is to combine lazy loading with BlurHash.

In this article, we’ll discuss what BlurHash is and how to apply it to your images using imgix.

What Are Image Placeholders and BlurHash?

Placeholders are a great option to improve perceived load times and offer a better user experience when a connection or site is slow to load images. BlurHash is an algorithm that lets you create a compact version of an image placeholder.

The algorithm creates a string of characters that encodes a blurred representation of the image, with the number of characters determined by the quality of the image. The string is short enough that you can serve it directly in the markup of your page, and then the string can be decoded into the blurred image—without having to fetch and download an image file.

A key benefit of BlurHash is that you can convert large image files into a smaller amount of data so that a blurred representation of the image appears while the original file is still loading. An engineer at Wolt came up with the idea for BlurHash while trying to find a better solution for how images would load on a slower internet connection.

How to Use the BlurHash Feature

To create a blurred image, simply add fm=blurhash to any image to get the BlurHash string. Once you have the BlurHash string, you can use it in the BlurHash component. The BlurHash component is responsible for decoding the hash into an image that can be displayed.

In this particular example, the React BlurHash component generates a canvas element in the final markup. Note: the generated markup can differ slightly depending on which library or framework decoder is used.

import './App.css';
import Imgix from "react-imgix";
import { Blurhash } from "react-blurhash";


function App() {
  return (
    <div className="App">
      <section className="App-header">      
        <Blurhash
          hash="eCF6B#-:0JInxr?@s;nmIoWUIko1%NocRk.8xbIUaxR*^+s;RiWAWU"
          width={600}
          height={400}
        />

        <Imgix
          src="https://assets.imgix.net/example-images/puffins.jpg"
          width={600}
          height={400}
        />
      </section>
    </div>
  );
}

export default App;

Once you’ve applied the BlurHash code to your image, the resulting placeholder will look like this:

Include the BlurHash string with your markup at build time to ensure users see the blurred version of the image immediately.

To get started, create a free imgix account today!