Responsive Image Breakpoints Generator

Written by Jason Grigsby on

Responsive image breakpoints have vexed me for nearly four years. They have been my personal koan—my unsolvable problem—until today.

Logo for ResponsiveBreakpoints.comSee a couple of years ago, I had a crazy idea to pick image breakpoints using performance budgets. John got excited by this idea and built a rough prototype of how this might work.

I used the script John wrote to create a demo page showing how a performance budget could be used to select image breakpoints. But the script was never intended to be a production tool.

Still, the idea had legs. And it was clearly something other people could use:

Unfortunately, building such a tool was beyond my skill level. The job called for someone who understood image processing and compression much better than I do.

That’s why I’m thrilled to share that Cloudinary took up the challenge and built the Responsive Image Breakpoints Generator.

responsive-images-generator-800

The Responsive Image Breakpoints Generator works better than I could have imagined. From an end user standpoint, you simply:

  1. Select the smallest and largest size your image will be used at.
  2. Set your performance budget.
  3. Upload your image.

That’s it! The tool does the rest. The generator will:

  • Determine the optimal number of images you need.
  • Provide you with sample code for those images.
  • Offer a zip file for download that contains all of the images and code you need.

And the kind folks at Cloudinary have made the tool free to use and open sourced the front-end code.

They’ve also integrated this capability into their platform and API so if you want to use the tool in an automated fashion, you can do so. They even have a free tier of their service that includes 7,500 monthly image transformations which is more than enough for small sites.

Nadav Soferman, a co-founder of Cloudinary, has written in more detail about the tool and why it is important at Smashing Magazine.

Simply giddy

I can’t begin to tell you how excited and honored I was to find out that Cloudinary was working on building my crazy idea. It has been all I could do to keep it secret for the last couple of months while they put the finishing touches on the site.

Thanks to Nadav, Tal and the whole team at Cloudinary for making this tool a reality and giving it away to the web community!


Never miss an article!

Get Weekly Digests


Comments

Holy timely article. I was just talking about this with my team today. Amazing find!


Let’s discuss your project! Email Us