Cloudinary Blog

jQuery Sliders: How to Cut Image Size by 96.3 Percent

How to Optimize Image Size for Your jQuery Slider

Many modern homepages feature a slider or carousel to rotate images of, for example, offers from or characters of the brand. Have you noticed that homepages are slow to load, though? The size of the images on sliders could be to blame.

A common development vehicle for sliders is jQuery, which is no performance killer. However, a jQuery slider’s image size could slow down page loading.

We recently conducted a test with bxSlider, a popular jQuery-based image slider, by placing an 800-pixel-wide image version on a webpage and sampling the image size in four scenarios:

  • Scenario 1: Full-size images resized on the client side. With no optimization or resizing transformations, this is the worst-case scenario.
  • Scenario 2: Images resized to the slider width. This is an enhanced scenario. However, manually resizing images hinders responsive designs with no optimization for them.
  • Scenario 3: Full-size images optimized by Cloudinary. In this scenario, two Cloudinary optimization parameters reduced the image size by almost 50 percent.
  • Scenario 4: Images optimized and dynamically resized to the slider width. This scenario reduced the image size by a remarkable 96.3 percent .

How to Optimize for Page Load Speed


Read on for the details on how the four scenarios yield different image sizes for a jQuery image slider and how you can easily downsize the example image from over 6 MB to under 300 KB.

Scenario 1: Slider With Large Images Resized on Client Side

Below are the four sample images for the bxSlider test, which shows one image at a time.

Four Slider Images

For this scenario, we displayed the original stock images as is. In order for them to show up in bxSlider at 800 px., the client (browser) resized them.

Obviously, this approach is “naive,” resulting in huge files. Besides, the browser must do the heavy lifting of resizing, which further lengthens page-load time.

This table shows the image’s actual resolution (before resizing) and file size:

 

Image Resolution

File Size (KB)

2,509x1,673

1,065

3,940x3,056

2,020

3,000x2,001

2,040

3,940x2,543

1,529

 

TOTAL

6.7 MB

You wouldn’t wait for this homepage to load.

Scenario 2: Images Resized to the Slider Width (800 px.)

Here, we manually resized the original images to 800 px.—a step that reduced the image size and page-load time. However, that technique is not ideal for responsive designs because, in real life, we would need to support several viewport sizes, which necessitates resizing each image multiple times.

This table shows the percentage of image-size reduction for this scenario:

 

Image Resolution

File Size (KB)

% Size Reduction
(Through Resizing)

800x533

184

82%

800x620

118

94%

800x533

235

88%

800x516

80

94%

 

TOTAL

0.6 MB

90%

 

Simple resizing in this case reduced the total image size by 90 percent, definitely a worthwhile effort.

Scenario 3: Full-Size Images Optimized by Cloudinary

This scenario demonstrates the amount of reduction in file size and page-load time achieved by optimizing the images without reducing their size. Below are the results. The images look exactly the same but, compared to Scenario 1, their sizes have been reduced by 47 percent.


 

Image Resolution

File Size (KB)

% Size Reduction
(Optimization Only)

2,509x1,673

541

49%

3,940x3,056

1,071

46%

3,000x2,001

1,099

46%

3,940x2,543

930

39%

 

TOTAL

3.6 MB

49%

 

Amazingly, even though the images are still huge (for example, the cute cat is a whopping 3,940 pixels wide), their total file size is down from a monstrous 6.7 MB in Scenario 1 to a more manageable 3.6 MB, a 47-percent savings, thanks to optimization.

The Ways In Which Cloudinary Optimizes the Images

With Cloudinary’s cloud-based service, you can manage images end to end: upload, store, administer, manipulate, optimize, and deliver them. Uploading to Cloudinary is intuitive and simple: either do it manually through our platform’s Media Library interface or programmatically with the Cloudinary API.

Once you or your users have uploaded images to your Cloudinary account in the cloud, you can crop, resize, apply smart effects, or optimize them. Cloudinary dynamically displays the modified images, delivering them through fast content delivery networks (CDNs). Many steps are automated, and no other software is required.

These two main image-optimization features on Cloudinary yielded the above 47-percent size reduction:

  • Automatic quality selection. To deliver the smallest possible file size without hurting visual quality, an intelligent quality and encoding algorithm in Cloudinary determines, by means of perceptual metrics and heuristics, the level at which an image is too compressed for a sharp display and then stops compressing at that level. For example, for a JPEG image, Cloudinary might conclude that 84 percent is the optimal quality level, i.e., the lowest possible JPEG quality for the image to still look the same.
  • Automatic format selection. Cloudinary can automatically detect a user’s browser and deliver an image in one of the advanced file formats that are available for that browser: WebP for Chrome and JPEG-XR for Internet Explorer. For other browsers, Cloudinary delivers a JPEG. Oftentimes, especially for newer browsers, this capability can dramatically reduce file size because WebP and JPEG-XR feature much better lossless compression than regular formats like JPEG or PNG.

Last, in Scenario 4, Cloudinary dynamically resized the images, rendering them much more responsive. Below are the details of that process.

Only One Line of Code (Per Image)

To have Cloudinary automatically select the quality level and format, perform these three simple steps:

  1. Upload the images to Cloudinary through its cloud-based Media Library or upload API](https://cloudinary.com/documentation/imageuploadapi_reference).
  2. Add this code for bxSlider, the free slider for the example in this post:
Copy to clipboard
<script>
            $('#aSlider').bxSlider({ 
              mode: 'fade', 
              captions: true, 
              adaptiveHeight: true, 
              slideWidth: 800 
            });
</script><ul id=aSlider">
 <li>
  <img 
    src="https://res.cloudinary.com/demo/image/upload/q_auto,f_auto/balloons.jpg" 
    title="Balloons"/>
 </li>
 <li>
  <img 
    src="https://res.cloudinary.com/demo/image/upload/q_auto,f_auto/car_lady_dog.jpg" 
    title="Car, Lady, and Dog"/>
 </li>
 <li>
  <img 
    src="https://res.cloudinary.com/demo/image/upload/q_auto,f_auto/friends.jpg" 
    title="Friends"/>
 </li>
 <li>
  <img 
    src="https://res.cloudinary.com/demo/image/upload/q_auto,f_auto/sofa_cat.jpg" 
    title="Cat on Sofa"/>
 </li>
</ul>
  1. Add these two optimization parameters: q_auto (automatic quality) and (f_auto) (automatic format) to the images’ special URLs on Cloudinary, e.g., https://res.cloudinary.com/demo/image/upload/q_auto,f_auto/balloons.jpg.

Instead of taking the above manual step, you can generate those URLs with Cloudinary’s SDKs, which support all popular programming languages. Note that the image URLs are the only difference between the Scenario 1 and Scenario 3 tests.

Again, on-the-fly optimization with Cloudinary alone reduced the file size of the images in this test by 47 percent.

Scenario 4: Images Optimized and Dynamically Resized to the Slider Width by Cloudinary

In this scenario, we not only optimized the images (see Scenario 3) but also dynamically resized them with Cloudinary.

First, instead of manually resizing the images for all viewport sizes, as in Scenario 2, we set the width parameter to direct Cloudinary to resize the images on the fly to the width of the slider (800 px.). Even though the images still reside at high resolution in Cloudinary’s back end, Cloudinary delivers them to the browser at a width of 800 px. nonetheless.

Tip: For responsive designs, you could add advanced Cloudinary parameters, such as c_scale and w_auto, to have Cloudinary automatically adjust the image size to the screen size in question. For details, see our documentation on responsive images.

Note
Cloudinary can also smart-crop and resize images while retaining the focus on their important elements.

Next, we applied the two optimization options, q_auto and f_auto, as in Scenario 3, netting a final reduction of 96.3 percent in file size, as shown below.


 

Image Resolution

File Size (KB)

% Size Reduction
(Resizing and Optimization)

800x533

70

93%

800x621

44

97%

800x534

109

94%

800x516

27

98%

 

TOTAL

250 KB

96.3%

 

That’s the ultimate goal: all four images still look the same but are down to a mere fraction of their original size.

The Code

The bxSlider code to add is exactly the same, except for a minor change in the image URLs:

Copy to clipboard
<!--bxSlider CSS file--> 
<link href="/js/vendor/jquery.bxslider.min.css" rel=stylesheet"/><ul id=aSlider">
 <li>
  <img 
    src="https://res.cloudinary.com/demo/image/upload/q_auto,f_auto,w_800/balloons.jpg" 
    title="Balloons"/>
 </li></ul>

All we did was add w_800 to the URL, which resizes the image to a width of 800 px. while retaining the aspect ratio. Combining that parameter with the two for image optimization reduced the file size by an impressive 96.3 percent, compared to 90 percent from a manual resizing without optimization (Scenario 2). And, to top it off, that’s an automated process on Cloudinary.

Here is the URL, which you can generate with a Cloudinary SDK in the programming language of your choice: https://res.cloudinary.com/demo/image/upload/q_auto,f_auto,w_800/balloons.jpg.

This scenario demonstrates that Cloudinary dynamically optimizes and resizes images on the fly before delivering them to users. You can change, add, or delete manipulation parameters at any time for any number of images, and your audience will immediately see the new look.

Addendum: Automatic Responsive Breakpoints

When building responsive designs, you must specify the image resolutions and determine the number of image versions to display, i.e., the responsive breakpoints (aka responsive image breakpoints). To balance the number of image versions for your responsive website, you must determine the correct number of breakpoints according to the file-resizing steps that you define. Theoretically, you can generate images for all possible width values and then select only those that deliver a significant size reduction. That’s a difficult and cumbersome task, however.

From an analysis of the behavior of compression mechanisms for various image formats (mainly JPEG, PNG, and WebP), Cloudinary has created an algorithm that intelligently identifies the optimal image breakpoints, giving you the best tradeoff between file size and bandwidth. The more image versions, the higher the bandwidth consumption. For details, check out our open-source tool Responsive Breakpoints Generator. For responsive sliders, in particular, consider leveraging that tool.

Summary

To a great degree, image sliders affect the load time of homepages and media-heavy webpages. Because they display large images, sliders are a prime candidate for image optimization. Do consider the strategies suggested in this post, especially given Cloudinary’s dynamic and automated capabilities.

Why not have a try with your images? As a first step, sign up for a free plan on Cloudinary.

Recent Blog Posts

Transitioning JPEG-Based to JPEG XL-Based Images for Web Platforms

When the JPEG codec was being developed in the late 1980s, no standardized, lossy image-compression formats existed. JPEG became ready at exactly the right time in 1992, when the World Wide Web and digital cameras were about to become a thing. The introduction of HTML’s <img> tag in 1995 ensured the recognition of JPEG as the web format—at least for photographs. During the 1990s, digital cameras replaced analog ones and, given the limited memory capacities of that era, JPEG became the standard format for photography, especially for consumer-grade cameras.

Read more

Amplify Your Jamstack With Video

By Alex Patterson
Amplify Your Jamstack With Cloudinary Video

As defined by Amazon Web Services (AWS), Amplify is a set of products and tools with which mobile and front-end web developers can build and deploy AWS-powered, secure, and scalable full-stack apps. Also, you can efficiently configure their back ends, connect them to your app with just a few lines of code, and deploy static web apps in only three steps. Historically, because of their performance issues, managing images and videos is a daunting challenge for developers. Even though you can easily load media to an S3 bucket with AWS Amplify, transforming, compressing, and responsively delivering them is labor intensive and time consuming.

Read more
Cloudinary Helps Move James Hardie’s Experience Online

While COVID has affected most businesses, it has been particularly hard on those that sell products for the physical ‘brick and mortar’ world. One company that literally fits that bill is our Australian customer James Hardie, the largest global manufacturer of fibre cement products used in both domestic and commercial construction. These are materials that its buyers ideally want to see up close, in detail. When customers have questions, they expect personal service.

Read more
How to Build an Enhanced Gravatar Service, Part 2

Part 1 of this post defines the capabilities of an enhanced Gravatar service, which I named Clavatar, and describes the following initial steps for building it:

This post, part 2 of the series, explains how to make Clavatar work like Gravatar and to develop Clavatar’s capabilities of enabling requests for various versions of the images related to user accounts.

Read more