Cloudinary Blog

Three Popular and Efficient Ways for Loading Images

By Ezequiel Bruni
Three Popular and Efficient Ways for Loading Images

In the web-design arena, what you don’t see can hurt you. Worse, it could damage your brand’s reputation, let alone hurt the bottom line. I’m talking about images, which can consume a lot of bandwidth, upwards of 70 percent in some sites. Viewing them incurs a cost on your and your visitors’ part. In fact, you’re probably charged for images that are not displayed because visitors don’t scroll down far enough to view them.

Furthermore, image-loading speed affects a site’s performance, both actual and perceived. The perception can exert a bigger influence on conversions than the actual loading time.

With Cloudinary, delivering images online takes only minimal bandwidth. The webinar below delves into the details.

This post describes the three popular ways in which to load images along with the pros and cons of those approaches.

Problematic Use Cases

For years, three kinds of images have been causing front-end developers headaches:

  • Below-the-fold images. Every so often, galleries, stores, and landing pages load images that their visitors never see or interact with. See this example. Why should visitors pay the toll if they don't scroll?
  • Hero images. These images, located at the top and big, bold, and bulky, can take a while to load. What are your visitors supposed to look at in the meantime?
  • Image carousels. Depending on their size, carousels can cause problems that are encountered by below-the-fold and hero images.

The bigger and the more popular the site, the more acute those issues become. Waiting for images to load on slow connections is annoying. Worse yet, visitors might even run out of data on their mobile plan as loading proceeds.

Three Popular Solutions

To avoid bloating the site and to display the related images fast, you would likely load them in one or more of these three ways:

  • Preload images. Load images before displaying them. Here is an example.
  • Lazy-load images. Load images only as needed, such as when the visitor scrolls down far enough. See this excellent example. A downside: this approach sometimes results in flashes of missing content.
  • Load progressive images. Load a small (often blurred) preview image first, then a larger, high-resolution image. Medium does that, ditto Facebook.

Now, which way is the “best”? You can probably tell from the quotation marks that there is no best way: you pick the technique that would be the most ideal for the job at hand given the pros and cons, as described below.

Preloading gif

Preload Images

Many creative-design sites—especially those with video backgrounds or many large images, such as designer portfolios—preload images. If your site features a big image carousel that spans the entire width and height of the page, preloading makes sense. However, having visitors wait for a preloader to finish doing its job makes for poor user experience.

To eliminate that wait, try Mark Meyer’s recommendation: load images—especially those for sliders and galleries—that most visitors likely want to see with a preloader. Note that such an approach involves a healthy mix of parallel and sequential downloads along with heavy JavaScript, which works suboptimally on slow connections and devices.

For certain assets, consider loading them with the web standard <link rel="preload"> instead of JavaScript. Since that standard is currently only supported by Chrome, Opera, and the Android browser, best use it for internal projects only.

Bottom line: if preloading images is your best choice, such as in the case of a client request, do it with a preloader. Opt for carousels with a progress bar instead of those that show gradually loading images.

Lazy Loading

Lazy-Load Images

For large volumes of images, such as in the case of image galleries, newspaper sites, blogs, and e-commerce, lazy-loading them is byte economical. However, lazy loading currently requires a lot more JavaScript than other approaches, leading to more complexity, more development time, and a higher potential for error scenarios. Most concerning, if not all the JavaScript is downloaded in the case of a slow connection or if not all the JavaScript is executed, your images might not show up at all. In that case, depending on the implementation, no images are displayed below or above the fold.

Lazy loading is ideal for well-known and well-understood demographics, who are mostly on mid- to high-end smartphones on fast networks, or laptop or desktop devices on broadband. If your audience is on slower connections, to avoid the dependency on JavaScript, do not lazy-load your images.

Note
Consider this workaround with a non-JavaScript fallback, suggested by Robin Osborne.

Another option to check out is the library lazysizes, which lazy-loads images and generates related messages on the fly.

Two more tips:

  • Ensure that essential images are as small as feasible and load them as normally as possible.
  • Lazy loading usually works well for nonessential images in blog posts and photography portfolios. However, lazy-loading product shots on e-commerce sites might backfire because potential buyers might not be able to locate your product, especially if they’re on a mobile device with a slow connection.

Progressive images

Load Progressive Images

Progressive images, aka image previews or low-quality image placeholders, are gaining popularity, notably on sites like Medium and Facebook, where images are at least as important as the text and a must-display.

Progressive images scratch a different itch altogether: perceived performance. As mentioned earlier, websites shouldn’t just be fast, they must feel fast. In this era of the microsecond-long attention span, you must keep visitors around long enough for your images to load in the first place. On sites in which images are the bulk of the content, that means letting visitors know that images are coming up momentarily.

A common way of doing that is by showing a much smaller, blurry version of the image, which fades into place once the high-resolution version loads. In the meantime, visitors who are reading the text of, say, a Medium post, might be none the wiser. Given the saying that the first impression is the last impression, progressive images can help you optimize that perception.

Note two other benefits offered by progressive images:

  • Handling of progressive Images can occur in the back end of websites or apps, requiring minimal JavaScript. HTML and CSS would suffice for generating low-quality image placeholders. Here’s an example.
  • Previews of progressive images are always displayed in the same size as their originals, which means that the page layout loads everything in the right dimensions, simplifying things dramatically.

Again, you load progressive images to let visitors know that images are forthcoming. For e-commerce sites, when a page full of product shots opens, you want visitors to wait around long enough for them to load. For social networks, you want the audience to see their newsfeed actively loading; if parts of it look empty, they might become frustrated and leave.

Still worried about the bytes? Complement this technique with responsive images on Cloudinary. All you have to do is load the image preview and then add an image tag with the srcset attribute. Even though such a step requires generating different sizes for every image, it’s an automated, seamless, and efficient process on Cloudinary.

Summary

Lazy-loading images is the best choice if bandwidth is your only concern. For tips on implementing that procedure, see this article. Also, keep in mind that progressive images might make a better first impression. In addition, I recommend the following:

  • Lazy-load nonessential images as long as you have a fallback, in particular if your audience is on a fast connection.
  • Progressively load images for sites in which images are all-important, e.g., product shots, social newsfeeds, articles whose context rests on the related photos, and tutorials.
  • Preload images only if you have no other choice because doing so risks encountering the potential drawbacks of lazy loading and requires, by default, more bandwidth.

You could preload, say, the first three images in a carousel and lazy load the rest with blurry previews. That’s a complex move, however. On the other hand, by evaluating your approach on a case-by-case basis while taking into account your project’s various elements, you might be happily surprised by what you discover. If you come up with something cool, do tell us in the comments.

Want to Learn More About Lazy-Loading?

Recent Blog Posts

Our $2B Valuation

By
Blackstone Growth Invests in Cloudinary

When we started our journey in 2012, we were looking to improve our lives as developers by making it easier for us to handle the arduous tasks of handling images and videos in our code. That initial line of developer code has evolved into a full suite of media experience solutions driven by a mission that gradually revealed itself over the course of the past 10 years: help companies unleash the full potential of their media to create the most engaging visual experiences.

Read more
Direct-to-Consumer E-Commerce Requires Compelling Visual Experiences

When brands like you adopt a direct–to-consumer (DTC) e-commerce approach with no involvement of retailers or marketplaces, you gain direct and timely insight into evolving shopping behaviors. Accordingly, you can accommodate shoppers’ preferences by continually adjusting your product offering and interspersing the shopping journey with moments of excitement and intrigue. Opportunities abound for you to cultivate engaging customer relationships.

Read more
Automatically Translating Videos for an International Audience

No matter your business focus—public service, B2B integration, recruitment—multimedia, in particular video, is remarkably effective in communicating with the audience. Before, making video accessible to diverse viewers involved tasks galore, such as eliciting the service of production studios to manually dub, transcribe, and add subtitles. Those operations were costly and slow, especially for globally destined content.

Read more
Cloudinary Helps Minted Manage Its Image-Generation Pipeline at Scale

Shoppers return time and again to Minted’s global online community of independent artists and designers because they know they can count on unique, statement-making products of the highest quality there. Concurrently, the visual imagery on Minted.com must do justice to the designs into which the creators have poured their hearts and souls. For Minted’s VP of Engineering David Lien, “Because we are a premium brand, we need to ensure that every single one of our product images matches the selected configuration exactly. For example, if you pick an 18x24 art print on blue canvas, we will show that exact combination on the hero images in the PDF.”

Read more
Highlights on ImageCon 2021 and a Preview of ImageCon 2022

New year, same trend! Visual media will continue to play a monumental role in driving online conversions. To keep up with visual-experience trends and best practices, Cloudinary holds an annual conference called ImageCon, a one-of-a-kind event that helps attendees create the most engaging visual experiences possible.

Read more