Blurry to Crisp: Progressive Media for Better UX

Chris Nwamba

An image, they say, is worth a thousand words. My bet is that the image above is already giving you a rough idea of another interesting topic about to be discussed on web media.

On average, 70 percent of web content is media, which impacts the way we build websites. As a result, optimizing media content isn’t the only factor to consider; delivery strategy matters equally as much now. Let's explore some of these strategies while shining a spotlight on the practice of Progressive Image Delivery.

Why Does Delivery Strategy Matter?

Let’s assume your benchmark for all the content on a given website is 1.8mb. Each image for the website has been fully optimized and ranges between 30kb and 50kb, which is great optimization. What if you need to deliver 500 (= 15mb to 25mb in total) different images? This is where problems arise because it would cross the benchmark. If you have already done your best to optimize these images, what else can you do?

Popular Delivery Strategies

This is a perfect time to look at how the community has attempted to solve such an image delivery challenge. There is no best or worst solution. Instead you need to consider what fits best or what does not make sense in a given situation.

They include:

Image Preloading

This method involves fetching images before the user gets to see them. The images are fetched and cached, then show to the user the cache when needed.

Image preloading delivers a rich user experience because your website almost feels like using a desktop app. The reason: 70 percent of its content is fetched and available to be served before the user requests it.

The downside to this approach is that your prediction about the user’s behavior might not always be correct. Therefore, you might end up wasting a user's bandwidth to download content they might not consume.

Dynamic/Lazy Loading

Codepen Demo:

See the Pen Lazy loading images by Eitan Peer (@eitanp461) on CodePen.

You probably have encountered lazy loading while scrolling to the bottom of a page and watching more feeds/posts/images appear stylishly like this example.

Lazy loading is a great strategy when you need to deliver massive numbers of images. The idea is to NOT load what is yet to be consumed; instead loading only when the user tries to access the part of the page that was initially concealed. Here is a good example of lazy loaded images.

Instagram feeds, Facebook feeds and Twitter timelines all take advantage of this strategy. It's handy when users are most likely to access a concealed section of the page, but need to be served with the bit they need to start using the app on load.

Lazy loading might not be the most enhanced strategy in some situations because users are kept waiting if their internet drops in the middle of scrolling through the feeds.

Progressive Loading

Progressive loading, which is the main focus of our discussion, is a more modern strategy for image delivery. Images are rendered progressively from a poor, bit-size quality version to the best, high-quality version.

In our example above, we have 500 images and our benchmark is 1.8mb. We could load the site and all the images progressively. On load, each of the image size could be 1kb (= 500kb in total), with other contents taking few more kilobytes. The image quality improves incrementally while the user consumes other contents, such as text.

The series of images below shows an example of the progressive process of loading an image as seen on Medium:

The progressive strategy is being accepted by users because other content is available to keep them engaged while the images progressively load.

Progressive delivery is not always the best. When your site is media heavy - meaning it has more images than text - it would be better to use the other two methods we described. The reason: There would be no alternative content to keep your users engaged if the site were mainly images, loading progressively over time.

Progressive Delivery with Cloudinary

If you have attempted delivering images progressively, you will find out it's quite challenging to complete. Cloudinary, a cloud- based image management solution, simplifies progressive image delivery. Cloudinary makes it so simple; all you need to do to make an image load progressively is edit a URL of an image stored on the Cloudinary server.

Preview the following image in your browser and observer how it loads:


http://res.cloudinary.com/demo/image/upload/w_300/sample.png


Now preview the following version of the above image:


http://res.cloudinary.com/demo/image/upload/w_300,fl_progressive/sample.png


What changed in the URL?

Cloudinary's power lies in transforming images via URLs. You can change the width, height, quality, filters and delivery strategy for any image just by tweaking URL parameters.

In the example above, we added fl_progressive to the URL transformation parameters to employ a progressive strategy for delivering our image. You will notice the image appear blurred, then immediately rendered perfectly.

To test out this method, signup on Cloudinary for free, upload a large image and try to deliver the image using the fl_progressive transformation parameter.

Cloudinary provides SDKs to seamlessly achieve progressive delivery from your coding environment without having to go through the mess of concatenating URLs and URL parameters. For example, with the JS SDK, you can do this:

js
cloudinary.image("sample.png", {width: 300, flags: "progressive"})


Progressive Delivery Modes

Codepen Demo:

The fl_progressive parameter also accepts a mode value to determine a specific progressive outcome as follows:

  • progressive:semi - A smart optimization of the decoding time, compression level and progressive rendering (less iterations). This is the default mode when using q_auto.
  • progressive:steep - Delivers a preview very quickly, and in a single later phase, improves the image to the required resolution.
  • progressive:none - Use this to deliver a non-progressive image. This is the default mode when setting a specific value for quality.

Conclusion

Progressive image delivery is not just about optimization, it also enhances perceived performance. Therefore, for websites with heavy texts and images, such as Medium, it is best to deliver your images in a way that doesn't come between the user and other non-media contents. Although achieving this naturally feels hard, Cloudinary has simplified it in such a way that you just need a URL parameter to be done with it.

This content is sponsored via Syndicate Ads

Chris Nwamba

JavaScript Preacher. Building the web with the JS community.