Late-loaded, blurred image replacement

The full Late-loaded, blurred image replacement article.

Vanilla JavaScript, with CSS fallback.

Another Late-loaded blurred image replacement

Improve perceived page load times by displaying a blurry low resolution image(s) immediately, without extra HTTP requests.

Once page has fully loaded, fetch the high resolution image(s), then cross-fade onto the display.

Blurred image replacement, late loader.

  1. Initially displays a CSS data URI embedded, small (< 2 KB) image, which is blurred to mask compression artifacts.
  2. After the page onload event fires the full resolution image is requested.
  3. Once the image request has fullfilled the image is animated into the viewport. A 1.5 second delay is added to emulate a slow network.

Small image is 140 x 42px @ 2KB and embedded as dataURI.
Large image is 1400 x 420px @ 437KB (ideally an easily divisible height and width combination).

Codepen available

Please note: Things may get unpredictably better or worse while modules are under development.