Cloudinary updates responsive images breakpoint tool

Programming - Apr 19, 2024

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.

Previous Next
We respect the property rights of others, and are always careful not to infringe on their rights, so authors and publishing houses have the right to demand that an article or book download link be removed from the site. If you find an article or book of yours and do not agree to the posting of a download link, or you have a suggestion or complaint, write to us through the Contact Us .
Read More