Embedded Image Preview (EIP)

Using the Embedded Image Preview (EIP) technology presented here, we can load qualitatively different preview images from progressive JPEGs with the help of Ajax and HTTP Range Requests. The data from these preview images is not discarded but reused to display the entire image.

For a complete description of how it works, please look here: Faster Image Loading With Embedded Image Previews

Find the source code of this example in this GitHub repository.

Load preview image as
HTTP request Data URI Use Scan # for preview image
1 (2,853 bytes) 2 (3,751 bytes) 3 (14,600 bytes) 4 (18,296 bytes) 5 (28,811 bytes) 6 (30,224 bytes) Blur radius of preview image
0 pixel(s) 1 pixel(s) 2 pixel(s) 3 pixel(s) 4 pixel(s) Load final image data after
0 second(s) 1 second(s) 2 second(s) 3 second(s) 4 second(s) 5 second(s) 6 second(s) 7 second(s) 8 second(s) 9 second(s) 10 second(s)

File size of full image: 31,995 bytes