Responsive image breakpoints have vexed me for nearly four years. They have been my personal koan—my unsolvable problem—until today.
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:
@grigs You ever think about Cloudfour building a product and creating the responsive image service that you know the web needs? 😉 😉
— Paul Irish (@paul_irish) April 28, 2014
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.
The Responsive Image Breakpoints Generator works better than I could have imagined. From an end user standpoint, you simply:
- Select the smallest and largest size your image will be used at.
- Set your performance budget.
- 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.
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.