Progressive Image Loading - Blurry Placeholder Image like Unsplash
Unsplash is my favorite image site, not only for it’s huge amount of free images but also for it’s great user-experience. It has already been quite a while since Unsplash started using BlurHash to delivery progressive Image Loading experience.
The Concept
Progressive Image Loading
Progressive Image Loading makes better user experience. But what is Progressive Image Loading?
Instead of waiting for the final image to be rendered, use a low-quality image as placeholder (LQIP) first, swith to the original one when it’s loaded.
What is going on?
- Render an element (
divfor example) with specificaspect-ratio, usually the same as the original image - Render a low-quality image first
- When this element is in viewport, triggers loading the original image
- After the original image is loaded, renders it upon the low-quality image and then hide/remove the low-quality image on the background
Here’s an example:
Placeholder vs. The Original
⬅️ This 8 × 8 px image can be scaled up many times (865 × 649 px on my screen for example) without increasing noticable noises.
What does Unsplash do?
- Fetch list data using XHR
- Decode Blurhash from
blur_hashfield of a list item - Generate a 8 x 8 px
image/bmpimage, rendered as image placeholder - Render the original image when it’s loaded
Why BMP?
See Size Comparison. When canvas width is below 20px, image/png and image/bmp has almost the same size in comparison.
Image Blurrer
I created a web app (Image Blurrer) to generate blurry placeholder image. 4 types of output image supported:
Comparison
In my personal usage and test, StackBlur is my favorite.
Image Quality
Image Size
Test Image: https://assets.lynan.cn/uPic/progress-image-loading-test-img.jpg
| width(px) | jpeg | png | bmp |
|---|---|---|---|
| 4 | 132 B | 90 B | 90 B |
| 6 | 168 B | 135 B | 135 B |
| 8 | 225 B | 198 B | 198 B |
| 10 | 276 B | 279 B | 279 B |
| 12 | 363 B | 378 B | 378 B |
| 14 | 423 B | 495 B | 495 B |
| 16 | 543 B | 630 B | 630 B |
| 18 | 618 B | 783 B | 783 B |
| 20 | 765 B | 954 B | 954 B |
| 22 | 831 B | 1.1 KiB | 1.1 KiB |
| 24 | 1008 B | 1.3 KiB | 1.3 KiB |
| 26 | 1.1 KiB | 1.5 KiB | 1.5 KiB |
| 28 | 1.3 KiB | 1.8 KiB | 1.8 KiB |
| 30 | 1.4 KiB | 2.0 KiB | 2.0 KiB |
| 32 | 1.6 KiB | 2.3 KiB | 2.3 KiB |