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.
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:
- Simple Responsive Images With CSS Background Images8
- Automate Your Responsive Images With Mobify.js9
- How To Solve Adaptive Images In Responsive Web Design10
- Responsive Images In WordPress With Art Direction11
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.
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
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.
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.
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.
- 1 https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/
- 2 https://github.com/scottjehl/picturefill
- 3 https://dev.opera.com/articles/responsive-images/
- 4 http://www.netvlies.nl/tips-updates/design-interactie/retina-revolution
- 5 http://www.netvlies.nl/tips-updates/design-interactie/retina-revolution
- 6 http://www.netvlies.nl/tips-updates/design-interactie/retina-revolution
- 7 https://www.filamentgroup.com/lab/compressive-images.html
- 8 https://www.smashingmagazine.com/2013/07/simple-responsive-images-with-css-background-images/
- 9 https://www.smashingmagazine.com/2013/10/automate-your-responsive-images-with-mobify-js/
- 10 https://www.smashingmagazine.com/2013/06/clown-car-technique-solving-for-adaptive-images-in-responsive-web-design/
- 11 https://www.smashingmagazine.com/2016/09/responsive-images-in-wordpress-with-art-direction/
- 12 https://www.smashingmagazine.com/2013/09/responsive-images-performance-problem-case-study/
- 13 https://blog.imgix.com/2015/10/21/automatic-point-of-interest-cropping-with-imgix.html
- 14 https://blog.imgix.com/2015/10/21/automatic-point-of-interest-cropping-with-imgix.html
- 15 https://github.com/excellenteasy/grunt-image-resize
- 16 https://www.smashingmagazine.com/2013/10/automate-your-responsive-images-with-mobify-js/
- 17 https://www.smashingmagazine.com/2015/12/responsive-images-in-wordpress-core/
- 18 https://www.drupal.org/project/responsive_images
- 19 https://www.youtube.com/watch?v=rSNbxL57QaI
- 20 https://github.com/jwagner/smartcrop.js/
- 21 https://github.com/jwagner/smartcrop-cli
- 22 https://github.com/JamieMason/ImageOptim-CLI
- 23 https://blog.imgix.com/2015/10/21/automatic-point-of-interest-cropping-with-imgix.html
- 24 https://github.com/jwagner/smartcrop.js/
- 25 https://github.com/jwagner/smartcrop.js/
- 26 https://www.smashingmagazine.com/2016/01/responsive-image-breakpoints-generation/
- 27 http://cloudinary.com/blog/automatically_art_directed_responsive_images
- 28 http://cloudinary.com/blog/automatically_art_directed_responsive_images
- 29 https://ericportis.com/etc/cloudinary/
- 30 http://cloudinary.com/blog/automatically_art_directed_responsive_images
- 31 http://cloudinary.com/blog/automatically_art_directed_responsive_images
- 32 http://cloudinary.com/documentation/image_transformations#crop_modes
- 33 https://www.sizzlepig.com/