Blurred, Low-Resolution Previews
 

Blurred, Low-Resolution Previews

Maybe you have a blazing fast Internet connection and have set the CSS transition delay to zero in a user stylesheet - but I've added a very, very low-resolution preview to all image tiles on these pages.

The low resolution image is an eight by eight pixel PNG that has been encoded as a data: URL and used as CSS image-background for the images. The encoded images take up about 250 characters as data: URLs, which makes them bearable when inlined in the page source.

An example of low-resolution previews and the lazy-loaded medium-resolution previews.