Tips around mocking images and optimizing User experience (Beginner/Intermediate)

Recently, in some of my projects I have found that many developers prefer to load images directly from local storage without optimizing experience or using a CDN url but tend to mock images locally. This article is mainly for beginners/intermediate developers.

BlurHash by Wolt

To optimize your load time of images in your project be it any frontend UI framework or backend framework, here is an amazing tool by Woltapp , BlurHash. It takes an image and gives a short string, which represents the image. From backend we pass in both the string and the URL for the image. The BlurHash string image is first shown, until the image from the network is loaded. This optimizes the user experience and help in a progressive load of the image.

Here are some that generate mock avatars/images/placeholders. Please refer to their website for extended documentation.