Menu Search
Jump to the content X X
Smashing Conf New York

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. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Quick Tips 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.”

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.8

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.9
Automatic Point-of-Interest Cropping with imgix10, 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 ImageMagick11 or any other image editing tool for rescaling, or CMS plugins could take care of it for you: e.g. Mobify.js API12, Responsive Images in WordPress core13 and there is a solution for Drupal14, 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 Photoshop15, or use tools like Smartcrop.js2116, which is a fairly simple implementation of content aware image cropping with JavaScript. Potentially we could even integrate the smartcrop-cli17 (along with ImageOptim-CLI18) into our Grunt- and Gulp-building processes and crop images on the fly. You could also use imgix19 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.js20
Smartcrop.js2116, 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 Generator22, 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 images23 using the tool’s API.

Smartcrop.js24
An art-directed responsive images demo25 by Eric Portis, based on his article26 on automatically generated art-directed images.

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

(vf)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/
  2. 2 https://github.com/scottjehl/picturefill
  3. 3 https://dev.opera.com/articles/responsive-images/
  4. 4 http://www.netvlies.nl/tips-updates/design-interactie/retina-revolution
  5. 5 http://www.netvlies.nl/tips-updates/design-interactie/retina-revolution
  6. 6 http://www.netvlies.nl/tips-updates/design-interactie/retina-revolution
  7. 7 https://www.filamentgroup.com/lab/compressive-images.html
  8. 8 https://www.smashingmagazine.com/2013/09/responsive-images-performance-problem-case-study/
  9. 9 https://blog.imgix.com/2015/10/21/automatic-point-of-interest-cropping-with-imgix.html
  10. 10 https://blog.imgix.com/2015/10/21/automatic-point-of-interest-cropping-with-imgix.html
  11. 11 https://github.com/excellenteasy/grunt-image-resize
  12. 12 https://www.smashingmagazine.com/2013/10/automate-your-responsive-images-with-mobify-js/
  13. 13 https://www.smashingmagazine.com/2015/12/responsive-images-in-wordpress-core/
  14. 14 https://www.drupal.org/project/responsive_images
  15. 15 https://www.youtube.com/watch?v=rSNbxL57QaI
  16. 16 https://github.com/jwagner/smartcrop.js/
  17. 17 https://github.com/jwagner/smartcrop-cli
  18. 18 https://github.com/JamieMason/ImageOptim-CLI
  19. 19 https://blog.imgix.com/2015/10/21/automatic-point-of-interest-cropping-with-imgix.html
  20. 20 https://github.com/jwagner/smartcrop.js/
  21. 21 https://github.com/jwagner/smartcrop.js/
  22. 22 https://www.smashingmagazine.com/2016/01/responsive-image-breakpoints-generation/
  23. 23 http://cloudinary.com/blog/automatically_art_directed_responsive_images
  24. 24 http://cloudinary.com/blog/automatically_art_directed_responsive_images
  25. 25 https://ericportis.com/etc/cloudinary/
  26. 26 http://cloudinary.com/blog/automatically_art_directed_responsive_images
  27. 27 http://cloudinary.com/blog/automatically_art_directed_responsive_images
  28. 28 http://cloudinary.com/documentation/image_transformations#crop_modes
  29. 29 https://www.sizzlepig.com/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ 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 responsive Web design workshops, online workshops 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.

    1
  2. 2

    One word: IMGIX.
    Google it!

    2
  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 https://www.gradwerk.de/de/CMS5-das-Responsive-Webdesign-CMS#fokus (german).

    2
  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.

    https://wordpress.org/plugins/acf-focal-point/

    2
  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.

    3
  6. 6

    As usual, you show your complete ignorance of the world outside PHP here om Smashing Magazine. The open source .NET CMS Umbraco (http://umbraco.com) 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 (https://our.umbraco.org/projects/website-utilities/slimsy).

    -9
    • 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.

      2
  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.

    0
  8. 9

    Reminds me a bit of https://github.com/adamdbradley/focal-point, a CSS only solution.

    1
  9. 10

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

    -4
  10. 11

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

    0

↑ Back to top