Cloudinary Blog

Image Loading, Reloaded

There are many ways to load an image, choose one.

In the world of web design, what you don’t see can hurt you. Worse, it can damage your brand reputation, bottom line, or both.

Specifically I’m talking about images. Images can consume a lot of bandwidth (upwards of 70% of it for some sites). You get charged to send them. Your users are are charged to view them. In fact, you’re both probably getting charged for images that are never seen because website visitors never scroll down far enough to view them.

Cloudinary can help eliminate the bandwidth challenges associated with website images. In this blog, I’ll share three popular solutions and discuss the merits and pitfalls of each.

It’s also worth noting that images don’t just affect the actual performance of the site, but the perceived performance as well. They can have a major impact on how fast your site feels, which may have a greater impact on conversions than the actual loading time.

Use Cases

Let’s take a quick look at a few use cases that cause small headaches for front-end developers:

  1. Images below the fold: This is a major issue.. Sites ranging from galleries, to stores, to landing pages sometimes load assets that their users never see or interact with. Why should users pay the toll if they don't scroll? (See example)
  2. Hero images: They’re big, bold, and they’re right at the top. They’re also bulky and can take a while to load. What are your users supposed to look at in the meantime?
  3. Image carousels: Depending on their size, carousels can combine the issues of hero images with those of images below the fold. They can be large and your users might not stick around long enough to see them all.

The bigger and more popular the site, the more acute these issues become. Waiting for tons of images to load on slow connections is annoying. Waiting for them to load and finding out that you’ve run out of data on your mobile plan is frustrating.

Popular Solutions

To ensure your site isn’t bloated, and your users can quickly download the images they want to see, there are some popular solutions for developers:

  1. Preloading images: Load the images before your users get to see any of them. Look here for an example.
  2. Lazy Loading: Load the images only as needed, such as when the user scrolls down far enough to see them. Here’s a great example. The downside: This approach can result in flashes of missing content.
  3. Progressive images: Load a small (often blurred) preview image first, then load the larger hi-res image later. Medium does this, as does Facebook.

Now, which solution is the “best”? You can probably tell from my use of quotation marks that there is no “best.” Often you have to use what is best for the job at hand. Naturally, I have some opinions on that. If you disagree, or just have a somewhat different perspective, I encourage you to discuss this in the comments below.

Preloading gif

Preloading

Let’s talk about preloaded images first, as it’s the most situational. You’ll see them used a lot in highly creative designs, especially ones that have video backgrounds, or many large images, such as artists’ and designers’ portfolios.

Does your site have one of those big image carousels I mentioned? Maybe the carousel spans the entire width and height of the page? Then preloading makes sense...kind of. It’s best, when at all possible, to build a user experience that can finish loading as-needed. Forcing your users to wait for a preloader wasn’t cool in the days of animated splash screens, and it’s still not that cool now.

But life isn’t perfect, and sometimes you just need that big carousel. It could actually be the best solution for the problem at hand , or more likely a client request. The point is, if you have to do it, you may as well do it with a preloader. Carousels that show images still loading slowly are worse than carousels with a progress bar.

The preloader... reloaded

Up to this point, we’ve discussed preloaders as they relate to UX and UI design. We’ve discussed them in terms of progress bars and loading screens. But that’s just one approach. You can preload content without ever making the user wait.

Mark Meyer has a fantastic method for preloading images in a way that makes sense, especially for image sliders and galleries. It involves using a preloader to download the images that the user is most likely to want to see next, resulting in a much more seamless experience. This approach is achieved through a healthy mix of both parallel and sequential downloads.

Keep in mind that this solution relies heavily on JavaScript, and so can break down a little more easily on bad connections and slow devices.

You also might consider using <link rel="preload"> for some assets instead of pure JavaScript. It’s currently only supported in Chrome, Opera and the Android browser, so it might be best used in internal projects. But it is one more option available in the preloading arsenal.

Dynamic Loading

And now we get to the meat of this discussion. Lazy loading and progressive images are far more flexible options than preloading, and could potentially be used in almost every website. The more images you have, the more you’ll want to consider using one of these techniques. This is true not just for image galleries, but for newspaper sites, blogs, eCommerce, and more.

Lazy Loading

Lazy Loading

Lazy loading is by far the most byte-efficient technique on this list. What never gets loaded will never cost you in terms of bandwidth. It’s that simple. If traffic is your biggest concern, lazy loading is the way to go.

The potential complications lie in the implementation of lazy loading. Currently, it almost always requires a lot more JavaScript than other methods. More JavaScript means more complexity, more development time and more chances for something to go wrong.

That leads us to the last major complication: Lazy loading is an all-or-nothing game, most of the time. If not all the JavaScript is downloaded over a slow 3G connection, or if not all of the JavaScript is executed, your images might not show up at all. If it doesn’t work, none will be able to see the pictures below the fold...or above the fold either, depending on how you implemented it.

When to use/not to use

Lazy loading is ideal for those situations where your target demographic is known and well understood, and they mostly use devices with good connections and decent processors. We’re talking about mid- to high-end smartphones on fast networks, and laptop or desktop devices on broadband connections. If you cannot rely on most of your users to have these things, you’re better off depending on JavaScript as little as possible.

Lazy loading non-essential images in a blog post is a great idea. This approach will work in your photography portfolio too, most of the time. Lazy loading product shots in an online shop might backfire, if someone who needs to order your product can’t find it. This is especially true if they’re on a mobile device with a bad connection.

Images that are essential content should remain small when possible, and loaded as normally as possible. Non-essential images are always fair game for lazy loading.

Fortunately, there are workarounds for the potential pitfalls of this approach. In this article, Robin Osborne presents a lazy loading solution with a non-JavaScript fallback.

If you’re already depending on JavaScript, you can use a library like lazysizes. It will take care of the lazy loading and generate responsive images on-the-fly.

Progressive images

Progressive Images

Progressive images, sometimes called “image previews,” or “low-quality image placeholders,” are coming into their own. As mentioned before, we’ve seen the rise of progressive images on sites like Medium, Facebook and others where images are at least as important as the text, and not showing the image is simply never an option.

Progressive images scratch a different itch altogether: perceived performance. As I mentioned earlier, websites can’t just be fast, they have to feel fast. In this era of the microsecond-long attention span, you need to keep people around long enough for your images to load in the first place. On sites where images make up a majority of the content, that means letting people know there are images to see, if only they’ll wait a moment.

They usually do this by taking a much smaller, blurry version of the image, and showing it first. Once the high-resolution version loads, it fades into place. If your user got caught up reading the text of, say, a Medium post, they may be none the wiser. The first impression is the one that matters, and progressive images can help you to optimize that impression.

Other benefits of this approach include:

  1. Progressive Images can be all handled via the back end of a website or app. Very little JavaScript need be used to make this work, and even then, you don’t have to use it unless you really want to make it fancy. HTML and CSS are a great start on their own utilizing low-quality image placeholders. Here’s an example.
  2. Progressive image previews are always displayed at the same size as their originals, which means that the page layout will load with everything at the right dimensions, simplifying things dramatically.

As mentioned, progressive images are used primarily for sites where you need visitors to know that images are coming. Consider the eCommerce example again: When a page full of product shots first loads, you want people to wait around long enough for them to load. Social networks are another good example: You want visitors to see their news feed actively loading, and if parts of it look empty, they may get frustrated and leave.

Still worried about the bytes? Use this technique with responsive images, and you’re pretty much good to go. All you’d have to do is load up the image preview first, and then use an image tag with the srcset attribute. It’s an extra step, and requires generating the different sizes for every image, but that can all be automated.

Putting it All Together

Being lazy (when loading images) is a virtue when bytes are all that matter, and you know your users can handle the problems that come with lazy loading. Progressive images might make a better first impression, though.

I recommend using lazy loading non-essential images, mostly. You could do it with every image, so long as you have a fallback. It’s best for users that you know are on good connections, and for situations where saving bandwidth is paramount.

Progressive images should be used for all sites where images are a non-negotiable part of the experience. Examples include product shots, social news feeds, articles where the photos are necessary for context, and tutorials.

Preloading your images is best used when you have no other choice, as it has all of the potential drawbacks of lazy loading, and uses more bandwidth by default.

In the end, there’s nothing actually stopping you from preloading the first three images in a carousel, and lazy loading the rest with blurry previews just in case. Well, nothing except perhaps the overbearing complexity of that solution. My point is that you don’t have to stick with just one. Evaluate your approach to every situation, as well as to different elements of the same project.

You might be surprised by what you discover. And when you do come up with something cool, let us know in the comments.

Ezequiel Bruni Ezequiel Bruni is a web/UX designer, writer, and aspiring e-sports commentator. When he's not up to his finely-chiseled ears in wire-frames and front-end code, or ranting about the same, he indulges in video games, beer, pizza, video games, fantasy novels, stand-up comedy, and video games..

Recent Blog Posts

Build the Back-End For Your Own Instagram-style App with Cloudinary

Github Repo

Managing media files (processing, storage and manipulation) is one of the biggest challenges we encounter as practical developers. These challenges include:

A great service called Cloudinary can help us overcome many of these challenges. Together with Cloudinary, let's work on solutions to these challenges and hopefully have a simpler mental model towards media management.

Read more

Build A Miniflix in 10 Minutes

By Prosper Otemuyiwa
Build A Miniflix in 10 Minutes

Developers are constantly faced with challenges of building complex products every single day. And there are constraints on the time needed to build out the features of these products.

Engineering and Product managers want to beat deadlines for projects daily. CEOs want to roll out new products as fast as possible. Entrepreneurs need their MVPs like yesterday. With this in mind, what should developers do?

Read more

Your Web Image is Unnecessarily Bloated

By Christian Nwamba
Your Web Image is Unnecessarily Bloated

As a developer, it seems inefficient to serve a 2000kb JPEG image when we could compress images to optimize the performance without degrading the visual quality.

We are not new to this kind of responsibility. But our productivity will end up being questioned if we do not deliver fast. In order to do so, the community has devised several patterns to help improve productivity. Let's review few of these patterns based on their categories:

Read more

Google For Nigeria: We saw it all…

By Christian Nwamba
Google For Nigeria: We saw it all…

Note from Cloudinary: Christian Nwamba, a frequent Cloudinary contributor, recently attended, and was a main speaker, at the Google Developer Group (GDG) Conference in Lagos, Nigeria. Christian led a session teaching more than 500 developers how to “Build Offline Apps for the Next Billion Users.” The stack he used included JS (Vue), Firebase, Service Workers and Cloudinary. Below is his account of the conference and his talk.

Read more
Viral Images: Securing Images and Video uploads to your systems

When was the last time you got paid $40,000 for a few days of work? That is what happened last year to Russian independent security researcher Andrey Leonov, who discovered that if you upload a specially constructed image file to Facebook, you can make Facebook's internal servers, nested deep within their firewalls, run arbitrary commands to expose sensitive internal files in a way that could easily lead to a data breach.

Read more