Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

Automatically Art-Directed Responsive Images? Here You Go.

In many projects, responsive images1 aren’t a technical issue but a strategic concern. Delivering different images to different screens is technically possible with srcset and sizes and <picture> element and Picturefill2 (or a similar) polyfill; but all of those variants of images have to be created, adjusted and baked into the logic of the existing CMS. And that’s not easy.

On top of that, responsive images markup3 has to be generated and added into HTML as well, and if a new image variant comes into play at some point (e.g. a file format like WebP or a large landscape/portrait variant), the markup has to be updated. The amount of extra work required often causes trouble — so if you have a perfect product shot, you need to either manually create variants for mobile and portrait and landscape and larger views, or build plugins and extensions to somehow automate the process.

Compressive Images Technique4
Compressive images technique5: doubling in file dimensions, saving with the worst possible quality.

Sometimes workarounds work just well, too. One of them is compressive6 images7, a clever technique which suggests that the level of compression makes more of a difference than its physical dimensions. So, in Scott Jehl’s words, “given two identical images that are displayed at the same size on a website, one can be dramatically smaller than the other in file size if it is both highly compressed and dramatically larger in dimensions than it is displayed.”

Further Reading on SmashingMag:

So basically we could enlarge a given image, save it in the worst possible quality in Photoshop, and let the browser do the rescaling — on average, the actual image sent down the network would be larger in dimensions but approximately 50–65% smaller in file size. Now, that’s quite a difference. And it works in real projects.12

The downside: we offload the work to the client and if the user chooses to save the image, they’ll get a pretty suboptimal version of it. And it doesn’t help us with art-directed images either. That’s not quite a clean solution that we are looking for.

The Devil Is In The… Back-End! Link

A common scenario would be to integrate some sort of a back-end logic in the CMS, allowing content managers to upload images, define focal points for every given image and generate all of those cropped variants of each image on the fly.

Cropping entropy with imgix.13
Automatic Point-of-Interest Cropping with imgix14, using the crop=entropy parameter for intelligent automated cropping.

The “cropping” bit is a tricky one, and if you’re perfectly fine with resizing the images without art direction and allowing the browser to select an image that it feels would fit best, it won’t be a big hassle — you could use ImageMagick15 or any other image editing tool for rescaling, or CMS plugins could take care of it for you: e.g. Mobify.js API16, Responsive Images in WordPress core17 and there is a solution for Drupal18, too.

However, if art direction does matter — e.g. if you want to send very specific product shots to different kinds of screens — you’ll have to look into more advanced options. A wide landscape photo scaled down for the narrow viewport won’t be particularly helpful, and neither would a narrow image scaled up to fill the entire viewport on a wide screen. That’s where we need better, smarter solutions.

So What Are The Options? Link

Well, we could run batch processing through the content aware fill in Photoshop19, or use tools like Smartcrop.js2520, which is a fairly simple implementation of content aware image cropping with JavaScript. Potentially we could even integrate the smartcrop-cli21 (along with ImageOptim-CLI22) into our Grunt- and Gulp-building processes and crop images on the fly. You could also use imgix23 with its automatic point-of-interest cropping. That’s already a great start, but we’d need to write the markup for all those variants manually.

Smartcrop.js2520, a fairly simple implementation of content aware image cropping with JavaScript.

Good news: there is a new kid around the block. Just a few days ago we’ve written about the Responsive Image Breakpoints Generator26, 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 images27 using the tool’s API.

An art-directed responsive images demo29 by Eric Portis, based on his article30 on automatically generated art-directed images.

As Eric Portis explains in his article31, when using Cloudinary API, you can specify a crop_mode32 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 Sizzlepig33 (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.

Summary Link

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.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs front-end/UX workshops, webinars and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    There are also CDN/DAM services like Amplience which provide support for Dynamic Imaging and what they call “Point of Interest” designation in their platform. Super helpful for this type of art direction with responsive images. Here’s a link to their API regarding POI.

  2. 2

    One word: IMGIX.
    Google it!

  3. 3

    Nice to see, that other systems prepare for the most stressful part of content management, the handling-, cropping-, cutting-, reducing imagesize horror!

    Our handcrafted CMS5 from gradwerk GmbH uses a similar technology for almost two years now. The so called “Focus Point Technology” is giving our clients a nondestructive drag & drop option to decide what actually the important part of the image is. The CMS5 is doing the rest – automatically.

    This function is combined with a strong auto image optimization as well, giving our clients a state of the art technology and a chance to do their daily work without any stress and panic moments. Have a look (german).

  4. 4

    For anyone using Advanced Custom Fields in WordPress, I wrote a little plugin that lets you create focal point (with a nice little canvas UI) on images and as the screen resizes it keeps your focal point on screen.

  5. 5

    WordPress has many great plugins related to this. One of them is ImageEngine.
    Rumor has it that this tool will soon include automatic art direction with face- and focal point detection.

  6. 6

    As usual, you show your complete ignorance of the world outside PHP here om Smashing Magazine. The open source .NET CMS Umbraco ( has for several versions had the ability to just drag a dot around an image to set the focal point of the image. It will then do automatic cropping to any dimension (and you can override crops and do them manually, if desired). You can quite simply automate the generation of markup, or use a plugin (

    • 7

      Alex Lindgren

      May 23, 2016 10:51 pm

      Umbraco can easily support CDN. Ignore the negativity of this comment and the down votes for it. Umbraco provides great support for responsive images.

  7. 8

    Simon Bächler

    February 9, 2016 12:13 am

    A simple focal point is not enough for art direction. There should still be a human involved in making the decisions about it. Ideally the photographer. The W3C Universal images community group is working on a metadata standard and a set of tools that allow the definition of actual crops for different output sizes for an image. That way the rules for art direction can be stored within the source image and any compatible backend can use it.

  8. 9

    Reminds me a bit of, a CSS only solution.

  9. 10

    Adobe is also quietly attempting this on an enterprise scale with Adobe Assets and Scene7.

  10. 11

    This post helps to reduce the images sizes automatically for the responsive designs without disturbing the quality.


↑ Back to top