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

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.

Unsplash

Example

UI-Avatars

This is an open source library/api that provides easy to use mock avatars using initials.

Example

Lorem Picsum by David Marby & Nijiko Yonskai

This uses unplash under the hood.

Example

Pravatar by Simular

Example