Cloudinary updates responsive images breakpoint tool

In January, Cloudinary released a free tool for generating responsive image breakpoints that was based on some of the ideas I had for picking breakpoints based on performance budgets. Today they’ve updated with some amazing new features that I’m incredibly excited about.

The big new feature is that Cloudinary (and by extension, the free breakpoints tool) can now do art direction and output the <picture> element automatically!

This works because Cloudinary now has an algorithm that identifies the area of interest in each image. Then the tool allows you to define art-direction for each screen size by selecting the aspect ratio and viewport ratio, then it will do all the remaining work.

You can see this in action by using the Responsive Breakpoints tool and turning on all of the art direction options.

Simply handling the aspect ratio options is pretty cool by itself.

There are a bunch of other improvement to the Cloudinary service including:

• Analyzing every image to find the best quality compression level and optimal encoding settings
• Automatically converting images to the whatever format the user’s browser supports that will compress best
• Support for browser client hints which automates even more the responsive images work

For the full details on the improvement, check out Nadav Soferman’s announcement on the Cloudinary blog.