How to load images using the “blur-up” technique


Starting with a blurry image, which then gets clearer and clearer when loading finishes

304 words · 2 min read

Loading large images by first showing the blurred versions is becoming quite common, and it is easy to see why. Instead of showing a empty space of solid colour while loading, visitor can see a blurred image before the full image fades in.

In this post, I will describe how it is achieved in this website. The general idea is to create a tiny version of the image, which is small enough to load very quickly, and stretch it to the original size so that it appears blurry. The loading of the full-sized picture is then deferred.

Let’s start with the HTML file:

<header class="header-section blur-image" data-src="/path-to-original-image">
  <div class="full-image">
    <!-- More code goes here -->
  </div>
</header>

The tiny picture will be set as the background image for the <header>, while the full-sized picture will become the background image of <div class="full-image">. The data-src contains the path to the full-sized image, which will be important later.

You now need to create a tiny version of the image, and preferably encoded in Base64. You also need to set the animation for the fading-in of the original image:

.blur-image {
  background-image: url(data:image/jpeg;base64,...);
  filter: none;
  transition: -webkit-filter 0s 0.3s linear, filter 0s 0.3s linear;
}

.image-loaded {
  transition: opacity .25s linear;
}

.header-section, .full-image, .image-loaded {
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  -webkit-filter: none;
}

It is important to set background-size to cover in order to stretch the tiny image across the entire space.

Finally, the following will add class image-loaded and style="background-image: ..." to <div class="full-image"> after DOMContentLoaded event:

var a = document.querySelector('.blur-image');

document.addEventListener("DOMContentLoaded", function() {
  if (!a) return !1;
  var b = a.getAttribute("data-src"),
      c = document.querySelector('.full-image'),
      img = new Image;

  img.src = b;
  img.onload = function () {
    c.classList.add('image-loaded'),
    c.style.backgroundImage = 'url(' + b + ')';
  };
});

 Tech    26 Jul, 2016
 Web Development    Static Site  
Copyright © Peter Y. Chuang 2018

Peter Y. Chuang is a Hong Kong-born novelist and short story writer who’s lived in London and calls Berlin his spiritual home. He has completed the manuscript of a literary science fiction novel, Twenty Forty-Seven,” and is currently re-writing another literary novel, Only You Know What It Means.”

You may also like...