Cloudinary Blog

jQuery Sliders - How to Cut Slider Image Size By 96.3%

How to optimize the image size for your JQuery Slider

Have you ever noticed that home pages are slow to load? Sliders could be to blame. Many modern homepages use a slider or carousel design element to show several rotating images that provide different offers or present various aspects of the brand. A common choice for implementing these sliders is JQuery. While JQuery itself is not a performance killer, the large images displayed by the slider can be responsible for slowing down a home page’s load time.

In this post, we’ll present the results of a test we conducted using a popular JQuery slider, BxSlider. We implemented the slider on a web page, with a width of 800px, and sampled the image file size in four different scenarios:

  1. Full size images resized on the client side - This is the “worst case,” with no optimization of images at all.
  2. Images resized to the width of the slider - This is better, but images are resized manually, which is not convenient for responsive designs, and not optimized.
  3. Full size images, but with image optimization by Cloudinary - Cloudinary is a free cloud service that can optimize and modify images on the fly. In this scenario, we show how two image optimizations can reduce image size by almost 50 percent - with no resizing.
  4. Images dynamically resized to width of slider, with image optimization - Both resizing and optimization are done on the fly by Cloudinary. The result: A 96.3 percent reduction in file size for the specific images used in our test.

Read on to see how the four scenarios affect image size for a commonly used free JQuery slider, and how to easily go from a file size of over 6MB (in this example) to under 300KB.

Scenario #1: Slider with Large Images Resized on Client Side

Here are the sample images we chose for our BxSlider implementation. The slider shows one image at a time; here we’re showing all four.

Four Slider images

In this scenario, we left the original stock images as is, without reducing their size. In order to display them in our slider at 800px, images are resized on the client side.

Obviously this is a “naive” implementation, which results in huge file size. It also leaves the heavy lifting to the browser, requiring it to resize the file, which further increases page load time. Let’s take this as a worst case of non-optimized slider images.

In the following table, we show the actual image resolution (before resizing) and image file size.

 

Image Resolution

File Size (KB)

2509x1673

1065

3940x3056

2020

3000x2001

2040

3940x2543

1529

 

TOTAL

6.7MB

You wouldn’t wait for this homepage to load...

Scenario #2: Slider with Images Manually Resized to 800px

In this scenario, the original stock images were manually resized to 800px. This is an “obvious optimization,” which helps a lot in reducing image size and page load time.

However, because images were manually resized to a pre-set width (800px in our case), it’s not ideal for responsive designs. In a realistic scenario, we would need to support several viewport sizes, and then we’d have to resize each image multiple times.

Also, there are additional ways to reduce image size, as we’ll see in the following sections.

Here’s what we save via plain image resize:

 

Image Resolution

File Size (KB)

% Size Reduction
(Resize Only)

800x533

184

82%

800x620

118

94%

800x533

235

88%

800x516

80

94%

 

TOTAL

0.6MB

90%

 

Simple resizing of the images reduced the total image size by 90 percent, so it is definitely worthwhile.

Scenario #3: Slider with Large Images Optimized by Cloudinary

What more can we do beyond the obvious optimization of resizing the image?

In this scenario, we’re back to using huge images with client-side resizing. We wanted to show the impact of image optimization. How much can you save on file size (and page load time) just by optimizing the images, even without reducing their size?

In a minute we’ll explain just how we optimize the images. But first let’s look at the results: The images look exactly the same, but file size compared to Scenario 1 is reduced by 47 percent.


 

Image Resolution

File Size (KB)

% Size Reduction
(Optimization Only)

2509x1673

541

49%

3940x3056

1071

46%

3000x2001

1099

46%

3940x2543

930

39%

 

TOTAL

3.6MB

49%

 

What’s amazing here is that the images are still huge (for example, the cute cat is a whopping 3940 pixels wide). But their file size is down from a monstrous 6.7MB in Scenario 1 to a more manageable 3.6MB. We saved 47 percent on file size by optimizing the images.

How Did We Optimize the Images?

We used Cloudinary, our cloud-based service that provides end-to-end image management, including upload, storage, administration, manipulation, optimization and delivery.

With Cloudinary, you can upload images to the cloud (or let your users upload them) and automatically perform smart image manipulations without installing any software.

If you’re the one producing the images, which is probably the case if you’re building a slider for your site, you can upload the images manually using our Media Library interface or programmatically via API. Once the images are stored in your Cloudinary account, you can perform any number of operations on them, including cropping, resizing, smart image effects, as well as various types of image optimizations. The modified images are dynamically displayed to your users and delivered via fast CDN.

Cloudinary provides two main image optimization features, which made it possible to reduce image size by 47 percent above:

  • Automatic quality selection: Cloudinary uses an intelligent quality and encoding algorithm to find the quality/compression level and encoding settings that produce the smallest possible file size, without hurting visual quality. The algorithm uses perceptual metrics and heuristics to determine when an image is too compressed and does not look as good, then stops compressing at that level. For example, Cloudinary can detect that for a JPEG image, 84 percent is the optimal quality level. This is the lowest possible JPEG quality for which the image still looks the same to a website visitor.
  • Automatic format selection: Cloudinary can automatically detect a user’s browser and deliver an image in advanced file formats available for that browser: WebP in Chrome, and JPEG-XR in Internet Explorer. For other browsers, it delivers a JPEG. For many users running newer browsers, this feature can dramatically reduce file size, because WebP and JPEG-XR have much better lossless compression than regular formats like JPEG or PNG.

By combining these two features, we achieved a massive reduction in file size without resizing the images at all!

Don’t worry, we’re not leaving the images like this. In Scenario 4 we’ll also resize the images, this time doing it dynamically using Cloudinary, which is much more responsive-friendly. But first a few words about how the image manipulations were done.

Only One Line of Code (Per Image)

To achieve the two image optimizations we described above, all we needed to do is the following:

  1. Upload the images to Cloudinary using the Cloud-Based Media Library or the Image Upload API.
  2. Here is the code for bxSlider, the free slider we used in this example:
<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. The only difference between the “naive” implementation of the slider with full-size images stored locally (Scenario 1), and this implementation (Scenario 3), is the URLs of the images. We use a special URL that tells Cloudinary to apply the two optimizations: automatic quality (q_auto) and automatic image format (f_auto).

You can generate this special URL using Cloudinary’s SDKs for all popular programming languages. The resulting URL looks like this: https://res.cloudinary.com/demo/image/upload/q_auto,f_auto/balloons.jpg

Bottom line - image optimization alone reduced the file size by 47%: With Cloudinary’s image optimization, performed on-the-fly with a simple URL parameter, image size is reduced by 47 percent, even before we start resizing the images.

Scenario #4: Slider with Images Optimized and Auto-Resized by Cloudinary

In this scenario, we not only optimize the images (which, as we noted, shaves off almost 50 percent of their size), but we also use Cloudinary to dynamically resize them.

This is like Scenario 2 above. But instead of manually resizing images for every viewport size, we ask Cloudinary to resize the image on-the-fly to the width of the slider, 800px, using the width parameter. In the Cloudinary back-end, the image is still stored at high resolution, but it’s delivered to the browser at a width of 800px.

In a responsive design, you could use more advanced Cloudinary options (not shown here) such as c_scale and w_auto to automatically adjust the image size to the current screen size. For more details see our Automatic responsive images documentation. Cloudinary can also perform smart cropping and resizing, while focusing on the important elements in the picture.

We are still applying the two image optimization options, q_auto and f_auto, as shown in Scenario 3 above. Put together with the resize, this generates the final reduction in file size:


 

Image Resolution

File Size (KB)

% Size Reduction
(Resize + Optimization)

800x533

70

93%

800x621

44

97%

800x534

109

94%

800x516

27

98%

 

TOTAL

250KB

96.3%

 

This is where we want to be! All four images, still look the same, but they are down to a fraction of their original size.

The Code

The BxSlider code is exactly the same, with a small change to 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 to add w_800 to the URL, which resizes the image to a width of 800px while retaining the aspect ratio. Combined with the image optimizations, this reduced file size by the full 96.3 percent, compared to only 90 percent for just a manual resize without optimization (Scenario 2). And to top it off, there was no manual labor involved.

Here is the URL that achieves this, which you can generate in the programming language of choice (using one of our SDKs): https://res.cloudinary.com/demo/image/upload/q_auto,f_auto,w_800/balloons.jpg

Bottom line - Dynamic resize + optimization sliced off 96.3 percent of image size: Here we combined three image manipulations: resize, automatic quality selection and automatic format selection, which together reduced image size by 96.3 percent compared to the huge stock images from Scenario 1. All of this was done dynamically by Cloudinary and delivered to users on-the-fly. You can change parameters, add or remove image manipulations at any time for any number of images, and users will immediately see the change.

Addendum: Automatic Responsive Breakpoints

If you’re working on a responsive slider, leveraging automatic responsive breakpoints might come in handy. When building any responsive design, there’s a need to decide which image resolutions to select and how many different image versions to include in your responsive website. These are called responsive breakpoints or responsive image breakpoints.

To perfectly balance the number of image versions for your responsive website, you need to find the correct number of breakpoints according to the file size steps that you define. You can (theoretically) generate images for all possible width values and then select only those that provide a file size reduction that is really significant. However this is quite difficult to do in practice.

Cloudinary analyzed the behavior of compression mechanisms for various image formats (mainly JPEG, PNG and WebP) and created an algorithm that can intelligently identify the optimal image breakpoints and give you the best tradeoff between file size and bandwidth (the more image versions, the more bandwidth is consumed).

Check out our open source tool Responsive Breakpoints Generator to automatically determine the optimal image breakpoints for your responsive design.

Summary

Image sliders, which are often but not always based on JQuery, are a big contributor to the load time of home pages and other media-heavy web pages. Because sliders use large images, they are a prime candidate for image optimization.

In this post, we showed two strategies for reducing image size:

  • Simple resizing, a very effective tactic that can reduce image size by as much as 90% compared to original stock images
  • Finding the optimal file format and the lowest quality level that won’t hurt the visual quality of the images - in our test, this reduced image size by an additional 47%

In this blog, we showed how to do both of these easily in Cloudinary, a cloud-based service that provides end-to-end image management, including upload, storage, administration, manipulation, optimization and delivery. Cloudinary can dynamically resize images, even in multiple sizes for responsive designs, and can automatically switch an image to the file format and quality level that will provide the lowest possible file size. In our test on a free JQuery slider, this reduced image size by a whopping 96.3% compared to the original stock images.

Now you can try this out with your own images. If you don't already have a Cloudinary account, sign up for the free plan.

Recent Blog Posts

Creating HTML5 Animations

HTML5 is the latest evolution of the HTML standard. It is bundled with a lot of new elements and attributes that makes semantics, connectivity, performance, device access, 2D/3D graphics, animation and styling better on the web.

Read more
Cloudinary Uses Scale API to Focus on Image Compression

Here at Cloudinary, we provide a cloud-based tool that enables our users to compress images and video for their websites and apps. Our goal is to preserve the visual integrity of the content, but deliver the smallest file size to any device or browser to ultimately optimize website performance and end user satisfaction.

Read more
CloudinaryAndroid SDK

Developing applications for mobile consumption requires facing, and overcoming, some difficult challenges. Apps need to limit their RAM, CPU and battery usage while still performing the required tasks in a reasonable time frame. If too many background tasks are running, the mobile device can become sluggish, with the battery running out very quickly. Coordination with other apps is crucial to keep the device responsive and make the battery last longer.

Read more
forLoop: Nigeria Event on Building for The Next Billion Users

TL;DR

Since Google shared their intent for the next billion internet users, some African developers thought this was pointing right at them and they needed to act fast. The mission to bring the next billion users from Africa to the internet kicked off a storm of enthusiasm. This community event turned into a success story and this is a summary of what happened.

Read more
Taking a Collaborative Approach to DAM: The Importance of Marketing and IT Synergy

There are a lot of cool and useful marketing technology and tools available today. As a part of the marketing team at Cloudinary, we must identify and recommend the solutions that will scale and optimize our ability to reach, and effectively engage with, our prospects. One of the most critical tools, perhaps, is a digital asset management (DAM) solution, which I discussed in an earlier article here.

Read more