More examples of Progressive Image Loading

In a past post I dissected a technique used by Medium to display images, transitioning from a blurry image to the final one. Since then I have found some more sites following a similar approach. Let’s see how Quora, Quartz and Clicktorelease do it.

Quick Introduction

Images are the largest assets on web pages and they account for two thirds of the bytes. Image optimisation and choosing the right image format is paramount. In addition, some sites are also using small thumbnails as placeholders while the final image hasn’t loaded yet. This technique is also called “blur-up“. It basically tries to improve user’s perceived performance while also saving data traffic when combined with lazy-loading.

There are other alternatives to this approach. One of them consists of using a single JPEG image, tweaking its scan script to quickly render an initial pixelated version of the image and progressively load the final image in several scans. I recommend you having a look at Progressive JPEGs and green Martians to know more about this.

Also, if you like images optimisation, follow Cloudinary’s Blog, full with useful posts on this topic.

Quartz

Take a look at the following video, recorded when accessing a page on QZ.com with a throttled connection:

Quartz’s implementation follows this steps:

1. Request a small <img/> that will be blurred. In their case, they use 50px width images, with a 80% quality.
2. Apply blur effect using a CSS filter.
3. Request the large image.

One of the interesting points about Quartz is that their markup specifies the large image using the syntax for responsive images. The main difference is that they use a data-srcset attribute, so they control when to make the request and prevent the browser from requesting the large version of the image when the markup is parsed.

I find this approach very neat since they try to follow the “standard” way to serve images, adding extra bits to lazy load and animate the transition.

Quora

Quora also implements a blur-up technique for the images in their posts. To see an example head to this page.

Here we see what the page looks like when displaying the blurry placeholder:

Let’s dive into the code to see what’s going on. First of all, let’s focus on the HTML markup:

Why to use both data-src and master-src? The master_src image is the one requested when clicking on the image to get a larger view.

In Quora there is no blur effect applied. They use canvas.drawImage() to render the tiny thumbnail in the canvas. You can see this by inspecting their code, that lives in the shared/lazy_load_images module that gets bundled in the main JS file:

In short, Quora’s technique consists of:

1. Draw an inlined tiny PNG in a canvas
2. Request the large image using WebP (if supported) or other format.
3. Set the large image as source for the <img/> element, animate its opacity and hide the canvas.

Clicktorelease

Clicktorelease.com, @thespite’s website, has just been redesigned and he has also added lazy-loading of images.

Clicktorelease lazy loading. See video for better resolution.

The most interesting bit here is that the thumbnail is not the image itself, but the values of the DCT matrix for the thumbnail, which makes the payload really small.

These are the steps to load an image:

1. Make a request for the thumb-src image. It is a 16x4 PNG thumbnail whose size is usually in the 300B.
2. Create a <canvas/> and draw the image resulting from the calculation the inverse DCT of the thumbnail.
3. Request the large image using the original-src url. If the browser supports the webp image format, then “.webp” is appended to the src and a webp image is requested.

The initial markup looks like this:

I think it is a very good example of progressive enhancement, providing a <noscript> alternative, and going all the way up from a solid background-color, to a blurry gradient and finally the large image with support for webp.

Wrapping Up

It’s very interesting seeing these slightly variations for implementing progressive image loading. Some of them work without Javascript, some others are built on responsive images, some use CSS filters and others canvas.

If you want to follow a basic example, check my “Reproducing Medium loading image effect” pen. Let me know if you come across any other site implementing these techniques.

Related Content

I covered this post on my RenderConf 2017 talk Progressive Image Rendering, together with some other techniques to make image loading more performant.

I have also written about other using SVG for creating placeholders on Using SVG as placeholders — More Image Loading Techniques.

Using SVG as placeholders — More Image Loading Techniques

Originally published at jmperezperez.com.