Good news: there is a new kid around the block. Just a few days ago we’ve written about the Responsive Image Breakpoints Generator, a little open source tool that allows you to calculate breakpoints for your images interactively. Basically, you can upload an image, and the tool will detect appropriate breakpoints, rescale images and generate responsive images markup that you can then copy/paste into your HTML. You can go even further and automatically art direct responsive images using the tool’s API.
As Eric Portis explains in his article, when using Cloudinary API, you can specify a
crop_mode which allows you to mimic
background-size: cover in CSS. In addition to providing heights and widths, you can also specify the focal point using the
gravity parameter, zooming factor and supply aspect ratios, which can make URLs a bit easier to read. In fact, the API supports face detection, so if your images contain human faces, art direction can be automated with a higher probability of pretty decent cropping.
If you want to be able to define focal points for images explicitly, you might want to look into Sizzlepig (not free), an in-browser image batch processing tool that can be integrated with Google Drive and Dropbox, and allows you to change cropping and scaling for each image.
Ideally, we’d love to have one tool that would either generate “smart enough” crops and plug in the responsive images markup in the build automatically, or provide one interface to visually adjust the focal point of images and output “ready-to-go” markup. We aren’t quite there yet, but we might be soon.
In the meantime, the tools listed above could be good enough options to consider when tackling a quite daunting task of producing art-directed variants of images — either manually or by building custom CMS plugins.