Cloudinary updates responsive images breakpoint tool

Written by Jason Grigsby on

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.

Responsive Breakpoints converts an image to 16:9 aspect ratio

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.

Jason Grigsby

Jason Grigsby is one of the co-founders of Cloud Four, Mobile Portland and Responsive Field Day. He is the author of Progressive Web Apps from A Book Apart. Follow him at @grigs.

Never miss an article!

Get Weekly Digests

Let’s discuss your project! Email Us