Problem

One of the most common problem while developing most exciting websites is slow rendering of images. Images most commonly hurt performance of the website through layout shift, where the images pushes other elements around on the pages as it loads in. Sometimes it is totally okay to wait while your images load but sometimes it leads to very problematic situation

https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability2.webm

This performance problem is so annoying to users.

Reason for the problem.

Images can be large files, especially if they are high quality or high resolution. When a web page loads, the browser has to download all of the images on the page, which can take time. Additionally, if images are not optimized for the web, they can be even larger than necessary, which makes them take even longer to load.

Layout shift occurs when the browser needs to recalculate the layout of a page because an element, such as an image, has loaded and changed the size of the space it occupies on the page.

Solution approach

There are several approaches in optimizing techniques for images to load faster or to remove Cumulative Layout Shift(CLS). Most of the common techniques are:

• Choosing right image format
• Using image compression techniques
• Serve image with correct dimensions
• Use WebP images
• Implementing lazy loading using blurred images.

For now we are just implementing lazy loading using blurred image. To implement lazy loading we are using a library called blurhash and react-blurhash.

The below code block defines three functions for creating image hash.