{"id":21350,"date":"2016-01-26T09:54:05","date_gmt":"2016-01-26T09:54:05","guid":{"rendered":"http:\/\/introducing_intelligent_responsive_image_breakpoints_solutions"},"modified":"2025-08-21T12:20:14","modified_gmt":"2025-08-21T19:20:14","slug":"introducing_intelligent_responsive_image_breakpoints_solutions","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/introducing_intelligent_responsive_image_breakpoints_solutions","title":{"rendered":"Introducing Intelligent Responsive Breakpoints Solutions"},"content":{"rendered":"

The number of different devices available and their potential screen resolutions keep increasing, and to support this wide range of resolutions and devices, responsive website design is now the standard. A website\u2019s markup must adapt itself to look perfect on all the different devices and in various resolutions, pixel densities and mobile device orientations. Managing, transforming and delivering images, is one of the main challenges of breakpoints for responsive design that web developers face.<\/p>\n

Implementing a breakpoints for responsive design means building your website where the same images may be displayed in various dimensions. One image for all screen resolutions and different devices is not enough. Cloudinary is already helping developers create responsive images<\/a> for websites, by uploading one image and dynamically resizing it to match different screen sizes. But clearly an image per pixel is too much – how can you automatically choose the optimal responsive image sizes?<\/p>\n

Whether you are using a Javascript based responsive library, the srcset<\/code> image attribute, the <picture><\/code> HTML5 element, the modern Client-Hints<\/a> or other responsive image solutions, they still lack a response to the common need of deciding which image resolutions to select and how many different image versions to include in your responsive website<\/strong>. These are called responsive breakpoints<\/strong> or responsive image breakpoints<\/strong>.<\/p>\n

\"Responsive\nCloudinary now offers a solution for intelligently finding the optimal responsive image dimensions for each specific image. The responsive breakpoints generation can be done programmatically using a cloud-based API or interactively using a new free open source web tool – the Responsive Breakpoints Generator<\/a><\/strong>.<\/p>\n

While Cloudinary is a commercial service (with a free plan), the Responsive Breakpoints generator is completely free, open sourced and hosted on GitHub<\/a>. We built it for the benefit of the community – recognizing that responsive breakpoints are a pain point for almost every developer trying to adapt their site to multiple screen sizes.<\/p>\n

Image-specific breakpoints selection<\/h2>\n

It\u2019s a challenge to find the best breakpoints for your images, and to avoid making the mistake of not selecting enough images or selecting too many images, you\u2019ll need to understand the tradeoff between the number of different images, the visual quality and the bandwidth involved.<\/p>\n

When a small dimensional reduction significantly reduces the file size of the image, you should definitely create another scaled down image version. On the other hand, if scaling down images by a certain amount doesn\u2019t significantly save enough bandwidth, you can deliver bigger images to your users and let the browser handle the resizing.<\/p>\n

The challenge of scaling down images is further complicated by the fact that the file size reduction varies for different images. It depends not only on the specific content of the images, but also on the variable sensitivity the image has to the compression algorithms of JPEG, PNG, WebP and other image formats. For some images, a small scale down saves significant file size, while for other images even a more prominent scale down will not significantly affect the file size.<\/p>\n

Therefore, you will want to define the file size step where it is worth creating another scaled down image version. Jason Grigsby<\/strong> of Cloud Four <\/a><\/strong> called this file size step performance budget<\/strong> in his article about image breakpoints<\/a>. Cloudinary\u2019s analysis verified that different images require a different number of versions<\/strong> in order to balance the bandwidth reduction trade-off according to your performance budget.<\/p>\n

Consider the following 2400×1600 JPEG image:<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget>\"Sample<\/p>\n

Assume you need to display this image in your responsive website in various width dimensions between 200 and 1000 pixels, and you define the minimum file size step (performance budget) to be about 20KB. As the table below shows, you only need to create and deliver five different versions<\/strong> of this image to fit all the different devices and browsers.<\/p>\n