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, short story writer, and a music critic who has lived in London at a time and now goes to Berlin semi-regularly for no good reason. When he’s not writing or reading, he’s probably playing with his cat, or listening to classical music, either at home or at one of the opera houses and concert halls in Germany. He uses Linux (current distro of choice: Arch Linux). Read more about his Linux stuff.

You may also like...