How to Create Responsive Image Breakpoints with the Cloudinary API

Even the most modern responsive websites often struggle with selecting image resolutions that best match the various user devices. They typically have to compromise on either the image dimensions, number of images created, or even worse, just simply use a single image with the largest resolution that may be needed. The process is getting more complicated, as the number of different devices and potential resolutions increase with innovations in screen technology and new sized screens, such as those on smartwatches and TVs, that are now entering the market.

Implementing a responsive design means building a website in which the same images may be displayed in various dimensions, and must look perfect on all devices and in various resolutions, pixel densities and orientations. Managing, manipulating and delivering media - specifically images - is one of the main challenges developers face when building responsive websites.

The various sizes and resolutions of images chosen for responsive design are called responsive image breakpoints. While there are several responsive frameworks and responsive image solutions available, they still lack tools to help you decide which image resolutions to select and how many different image versions to include in your website. As the process becomes more complex, it’s time to start calculating image breakpoints mathematically, rather than haphazardly or through guesswork.  

Responsive breakpoints generation can be done programmatically using Cloudinary’s cloud-based API or interactively using a free open source Web tool called the Understanding the Breakpoints Challenges Before explaining how to determine the optimal number of responsive image breakpoints using the Cloudinary API, let’s consider the challenges you face in breakpoints selection. It’s important to understand the tradeoff between the number of different images, the visual quality and the bandwidth involved, and how to find the best breakpoints for your images.

If Scaling down images by a certain level doesn't significantly reduce bandwidth, you can deliver bigger images to your users and let the browser handle resizing. But if a small dimension reduction significantly reduces the file size of the image, you should definitely create another scaled down image version. The file size reduction depends on the specific content of your images, which has a different sensitivity to the compression algorithms of JPEG, PNG, WebP and other image formats. Different images require a different number of versions in order to balance the bandwidth reduction trade-off.

Consider the following JPEG image:

Assume you need to display this image in your responsive website in various width dimensions between 200 and 1000 pixels. The first step is to define the file size step (also referred to as performance budget).  The file size step is the amount of file size savings you define as a point in which a new image should be created.  The smaller the file size step you choose, the more images that will be created and a larger potential savings in bandwidth.  If your website contains many images, it is better to chose a smaller file step size as the aggregate total of bandwidth you can save will be higher.  If you have few images, you can get away with a larger file step size without losing too much in bandwidth optimization.  The tradeoff here being additional code and images to maintain vs the performance improvements gained by delivering correctly-sized images (Though if you use Cloudinary’s APIs to do the work, this essentially becomes a moot point).

If you define your file step size as 20KB (a good best-practice for the average site), Cloudinary’s algorithm will analyze the image and only create a new breakpoint image if it is 20kb smaller (or larger) than the next step.  So if you start with a 100kb image, Cloudinary will create images with dimensions that output filesizes of roughly 100KB, 80KB, 60KB, 40KB, and 20KB.

As the table below shows, you only need to create and deliver five different versions of this image to all the different devices and browsers.

No.WidthHeightFile SizeImage
12001336.9 KBView Image
247731827.2 KBView Image
368145448.0 KBView Image
484756567.6 KBView Image
5100066786.9 KBView Image

Now let's take another JPEG photo:

Trying to find the best breakpoints for this image using the same settings of 200 to 1000 pixels wide and about 20KB file size steps, results in this image needing nine different versions as illustrated in the table below.

No.WidthHeightFile SizeImage
12001338.7 KBView Image
238025327.8 KBView Image
351434348.5 KBView Image
461941368.3 KBView Image
571147487.7 KBView Image
6804536108.5 KBView Image
7883589129.3 KBView Image
8957638148.2 KBView Image
91000667160.7 KBView Image

Comparing the two photos, the number of versions required for one image is almost half of the number required for another one. The difference might be even more dramatic for other kinds of photos. If you multiply this X2 difference by millions of user uploaded images, the result is a huge savings in storage, image processing costs and image management complexity, while still delivering the best looking images and preserving the User Experience.

Cloudinary is simplifying the process of determining responsive image breakpoints with algorithms to efficiently and intelligently find image breakpoints that match your dimensions and file size saving requirements. You can test out the process using the free Responsive Image Breakpoints Generator mentioned above, which requires you to interactively upload your images and define settings to find matching image dimensions that fit in your graphic design requirements. As shown in the screenshot below, you can define the required image width range, the file size step in kilobytes and a safety limit of the maximum number of images you allow. In addition, you can request that the results include double resolution images for DPR 2.0 displays (e.g., Retina Display).

Automate the Breakpoints Generation Process with the Cloudinary API

The breakpoints generator tool enables you to interactively process your images, which is useful if you have a reasonable amount of statically uploaded images. But, what if your Web application involves user-generated content of dynamically uploaded images?

Be sure to read the next Photos article: How to Use an Undocumented Facebook API to Identify Friends in Photos