Cloudinary Blog

Three Popular and Efficient Ways for Loading Images

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.


Sign up for Cloudinary free today!


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

Create Lightweight Sites With Low-Code and No-Code Technology

Consumers expect modern websites to be mainly visual. But, the more compelling and complex the related media is, the more data is involved, compounding the site’s weight. In today’s content-craving world, delivering unoptimized media can cost you because it leads to sluggish page loads, resulting in visitors abandoning your site in search of a faster alternative. In fact, a page load that takes more than three seconds can cause as many as 40% of your visitors to bounce. Given this competitive, digital-first environment, you can’t afford to lose page views, for time is of the essence.

Read more
A Blueprint for AWS-Secured Webhook Listeners for Cloudinary

tl;dr: An AWS-secured and optimized Cloudinary webhook listener for extending the Cloudinary service

Code: Github

A webhook is a communication medium for sending notifications from one platform to another about events that occurred. In place are user-defined HTTP callbacks that are triggered by specific events. When a triggered event takes place on the source site, the webhook listens to the event, collects the data, and sends it to the URL you specified in the form of an HTTP request.

Read more
New Accessibility Features for Cloudinary’s Product Gallery Widget

Cloudinary’s Product Gallery widget, which launched in 2019, has enabled many brands to effectively and efficiently showcase their products in a sleek and captivating manner, saving countless hours of development time and accelerating release cycles. By adding Cloudinary’s Product Gallery widget with its customizable UI to their product page, retailers reap numerous benefits, often turning visitors into customers in short order.

Read more
Why Successful Businesses Engage With and Convert Audiences With Visual Media

Most business buyers prefer to research purchase options online, as do many shoppers. No wonder online retail sales in the U.S. rose by 32.4% in 2020—an impressive gain of $105 billion.

For B2B and B2C businesses, text-heavy websites are no longer adequate in attracting shoppers. Instead, engaging visual media—spin images, videos, 3D models, augmented reality—are becoming a must for conveying eye-catching details and differentiators about products or services.

Read more
Making User-Generated Content (UGC) Shoppable With Cloudinary

User-generated content (UGC) is a powerful marketing tool. Not only does video complement marketing efforts for e-commerce by enabling customers to explore products in greater detail, but UGC also adds an element of trust. As a bonus, user-generated video is an exceptional opportunity for e-businesses to attract website traffic without their marketing team having to create promotional videos from scratch. User-generated content drives conversions and brand loyalty as a direct result of authentic interaction.

Read more