At imgix, we care deeply about user experience and page performance. Previously, we discussed . 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. lazy loading and its benefit on Core Web Vitals 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 while trying to find a better solution for how images would load on a slower internet connection. came up with the idea for BlurHash How to Use the BlurHash Feature To create a blurred image, simply add to any image to get the BlurHash string. Once you have the BlurHash string, you can use it in the component. The component is responsible for decoding the hash into an image that can be displayed. fm=blurhash BlurHash BlurHash In this particular example, the React 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. BlurHash 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 today! free imgix account Also published here.

Dynamically Processing User-Generated Images for Trust, Personalization and Efficiency

Why On-the-Fly Image Processing Beats Manual & Backend Processing

Sign Up for Free

Enhance Your Website's User Experience with BlurHash Image Placeholders

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

3 Simple Ways to Optimize Your Images and Improve Core Web Vitals

3 Simple Ways to Optimize Your Images and Improve Core Web Vitals

5 Tips to Improve the Core Web Vitals of WordPress Websites

7 Ways to Achieve a Faster Core Web Vitals Score

8 Ways to Improve the CLS Score in Google’s Core Web Vitals

A Beginner's Guide: Responsive Images With srcset

3 Simple Ways to Optimize Your Images and Improve Core Web Vitals

3 Simple Ways to Optimize Your Images and Improve Core Web Vitals

5 Tips to Improve the Core Web Vitals of WordPress Websites

7 Ways to Achieve a Faster Core Web Vitals Score

8 Ways to Improve the CLS Score in Google’s Core Web Vitals

A Beginner's Guide: Responsive Images With srcset

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps