Blurry before beautiful: image previews for the web

You've probably already seen this common pattern in action: blurry versions of the images of a site appear immediately and, moments later, their full versions replace them. This pattern has become so common that many image CDNs, frameworks, and libraries support it out of the box. But every implementation has to do the same thing: Fetch both the preview and the final images. Display the preview while the final image loads. Swap the preview and final images. Clean up after the transition. Below is an example of the effect, which shows a blurry preview image. Click the button below to load and display the final image: Load the final image Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat accumsan tristique. Phasellus sit amet mauris odio. Aenean urna felis, laoreet vel ipsum ut, dignissim fermentum mi. Fusce posuere efficitur laoreet. Donec lacinia massa cursus eros ultrices maximus. Proin sit amet vestibulum nibh. Nulla luctus eleifend nisl. Aliquam vel orci…