A clear look at blurry image placeholders on the web

Developers often use Low-Quality Image Placeholders (LQIPs) or "blur up image" technique to improve user experience by making webpages load faster. LQIPs involve resizing the original image, compressing it with JPEG encoding server side, and then upscaling the image and applying a Gaussian blur filter on the client side. This technique was first introduced by Facebook in 2015. Another approach is BlurHash, which encodes an image into a short string of characters for more efficient compression but requires JavaScript to decode on the client side. ThumbHash is another similar library that encodes even more detail and supports images with transparency. However, LQIPs are generally preferred by developers due to their better quality and compatibility with web browsers.