Progressive Image Loading with Cloudinary

3 min readJul 30, 2018

In this post we’ll learn about progressive images and why you might consider them in your next project.

What’s Progressive Image Loading?
It’s the process of loading a low-quality image to serve as a placeholder to its high-quality counterpart. This process is useful for image-heavy or infinite-scroll pages (think Facebook or Instagram feed) because low-quality placeholders provide the following:

reduce time to “see” imagery on page — a low-quality image will be significantly smaller in file size and will therefore download from the server faster.
help your users remain patient — placeholder images tell the user that images are on the way.
structure to the DOM — an <img> will default to a width and height of 0until it fully loads. Having a placeholder will reduce page flicker/jumps when images load.
a pleasant UI experience — progressive image loading opens the doors to animation and other transitions that can enhance the user experience.
reduce data and bandwidth costs — if progressive image techniques are coupled with Lazy Loading, images will only be downloaded from server when necessary (i.e. when <img> is in viewport)

EXAMPLES

High Quality Image (210Kb)

Low Quality Image Placeholder (25Kb)

CLOUDINARY

Cloudinary is an image service that can perform real-time transformations on images. I like their service and highly recommend them. Here’s an example of the URL parameters Cloudinary accepts to perform the transformations seen above:

Low-Quality Placeholder: Request a 478x300 image that’s blurred, converted to grayscale, and of low quality:

e_blur:1000/w_478,h_300,c_thumb,e_grayscale,q_auto:low

High-Quality Image: Request a 478x300 image that’s of full color and fidelity:

w_478,h_300,c_thumb,q_auto

Start experimenting today by signing up for a free Cloudinary account or exploring the Fetch Service under the demo account:

Hiqh-Quality Image:
https://unsplash.it/400/400

Low-Quality Image via Cloudinary Fetch:
https://res.cloudinary.com/demo/image/fetch/e_blur:1000/e_grayscale,w_400,h_400,q_auto:low/https://unsplash.it/400/400

IMPLEMENTATION

I like to create an image container <div> that surrounds both <img> tags — low-quality placeholder and high-quality image. I position the container as relative and apply a padding-bottom property with a value that equals the image width/height ratio in percentage (see below for popular values). I position the images as absolute. This prevents the image loading process from causing the page to jump/flinch as images are loaded.

Padding-Bottom calculations for popular image ratios:

//16:9 ratio
100/(16/9) = 56.25%
CSS -> padding-bottom: 56.25%//4:3 ratio
100/(4/3) = 75%
CSS -> padding-bottom: 75%//1:1 ratio
100/(1/1) = 100%
CSS -> padding-bottom: 100%

HTML / CSS

SEQUENCE OF EVENTS

1. Load low-quality image placeholder to DOM

2. Load high-quality image with a styles of visibility: hidden; opacity:0;

3. Once high-quality image loads, animate to visible

I hope you enjoyed this post. When loading a good number of images on a page (think feed) I highly recommend optimizing load efficiency further with a Lazy Loading strategy— load content as it becomes required/visible by user.