Filter effects in CSS have been around for a while, and together with things like blend modes, they bring new possibilities for recreating and manipulating stuff in the browser that we previously had to do in Photoshop.

Filter effects in CSS have been around for a while, and together with things like blend modes, they bring new possibilities for recreating and manipulating stuff in the browser that we previously had to do in Photoshop.

Here is what is going on:

Render a div where the image will be displayed. Medium uses a <div/> with a padding-bottom set to a percentage, which corresponds to the aspect ratio of the image. Thus, they prevent reflows while the images are loaded since everything is rendered in its final position. This has also been referred to as intrinsic placeholders.

Load a tiny version of the image. At the moment, they seem to be requesting small JPEG thumbnails with a very low quality (e.g. 20%). The markup for this small image is returned in the initial HTML as an <img/>, so the browser starts fetching them right away.

Once the image is loaded, it is drawn in a <canvas/>. Then, the image data is taken and passed through a custom blur() function You can see it, a bit scrambled, in the main-base. bundle JS file. This function is similar, though not identical, to Stack Blur’s blur function. At the same time, the main image is requested.

Once the main image is loaded, it is shown and the canvas is hidden.

A bird’s eye view of the markup for an image:

   
  

  

              

  

And a concrete example, so you see what goes in those tags:

   
  

  

  

              

  

  

Here is a demo (click ‘Run Pen’ to run it):

HTML

 
    

     

  

CSS

 
 
    .placeholder {  

    background-color: #f6f6f6;

    background-size: cover;

      background-repeat: no-repeat;

      position: relative;

      overflow: hidden;

    }

    .placeholder img {  

    position: absolute;

      opacity: 0;

      top: 0;

      left: 0;

      width: 100%;

      transition: opacity 1s linear;

    }

    .placeholder img.loaded {  

    opacity: 1;

    }

    .img-small { 

     filter: blur(50px);

      transform: scale(1);

    }

JS
window.onload = function() { var placeholder = document.querySelector('.placeholder'), small = placeholder.querySelector('.img-small') // 1: load small image and show it var img = new Image(); img.src = small.src; img.onload = function () { small.classList.add('loaded'); }; // 2: load large image var imgLarge = new Image(); imgLarge.src = placeholder.dataset.large; imgLarge.onload = function () { imgLarge.classList.add('loaded'); }; placeholder.appendChild(imgLarge);}

 

Is it worth it?

There is a lot of things going on to be able to render an image this way, and it can be discouraging to do something similar on your site. A few years ago it would have been impossible to do this animations and blur effects in a per format way, but the truth is that most of the times the latency is the bottleneck, not the device capabilities, and we can play with these visual explorations.

Having full control of the loading of images has some advantages:

Using JS for making the requests allows them to be in control of what images are requested. While all the small thumbnails are requested, the large images are only requests when they are within the viewport. The thumbnails are very small, barely 2kB, which combined with the blurry effect allows for a better placeholder than a solid color, without sacrificing payload.

Tailored image sizes. Medium serves different images sizes depending on the device that makes the requests, which optimizes the weight of the page.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Welcome to Wbcom Designs!  - Get 10% off on all plugins & themes
Coupon : HELLO10