jQuery Sliders: How to Cut Image Size by 96.3 Percent

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 .

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.

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:

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:

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.

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/image_upload_api_reference).
2. Add this code for bxSlider, the free slider for the example in this post:

<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.

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.

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:

<!--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.