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

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.

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.

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:

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.

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="http://res.cloudinary.com/demo/image/upload/q_auto,f_auto/balloons.jpg" 
    title="Balloons"/>
 </li>
 <li>
  <img 
    src="http://res.cloudinary.com/demo/image/upload/q_auto,f_auto/car_lady_dog.jpg" 
    title="Car, lady and dog"/>
 </li>
 <li>
  <img 
    src="http://res.cloudinary.com/demo/image/upload/q_auto,f_auto/friends.jpg" 
    title="Friends"/>
 </li>
 <li>
  <img 
    src="http://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: http://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:

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="http://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): http://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.