{"id":21352,"date":"2016-02-03T14:26:55","date_gmt":"2016-02-03T14:26:55","guid":{"rendered":"http:\/\/automatically_art_directed_responsive_images"},"modified":"2025-08-21T12:19:43","modified_gmt":"2025-08-21T19:19:43","slug":"automatically_art_directed_responsive_images","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/automatically_art_directed_responsive_images","title":{"rendered":"Automatically art-directed responsive images with Cloudinary"},"content":{"rendered":"

Previously<\/a>, we saw how to mark up performant, adaptable <img><\/code>s using srcset<\/code> and sizes<\/code> in conjunction with Cloudinary\u2019s image transformations.<\/p>\n

How far can we push that notion of \u201cadaptability\u201d? Last time, we learned how to offer up an image at a range of different resolutions. This allowed us to send large resources to large screens and small resources to small ones. We used srcset<\/code> and sizes<\/code> to adapt for performance<\/em>. But visually<\/em>, our images remained fixed.<\/p>\n

What if we could go a step further and adapt our image\u2019s visual characteristics at breakpoints<\/a>, just like we adapt our pages\u2019 layouts? The term for this sort of adaptation is art direction. In this article, we\u2019ll create an art-directed front page for our example site:<\/p>\n

https:\/\/ericportis.com\/etc\/cloudinary\/<\/a><\/strong><\/p>\n

The lead article\u2019s preview image on this front page is huge<\/em>, spanning the entire width of the page. On wide screens, in order to keep it from pushing the rest of the content \u201cbelow the fold\u201d, we need to crop it. Like this:<\/p>\n

The rest of the image previews? They have the opposite problem. Left to simply shrink along with a narrowing viewport, they\u2019d become too small to really make out. So on small screens, we want to \u201czoom in\u201d on their subjects.<\/p>\n

How can we achieve these things in markup? With a new element:<\/p>\n

The picture element<\/h2>\n

The <picture><\/code> element was added to the HTML specification last year<\/a> and has been implemented in every major desktop browser except for Safari<\/a> (Safari support is right around the corner<\/a>). <picture><\/code> gives us a way to supply alternate, visually distinct<\/em> versions of an image, and switch them out at breakpoints.<\/p>\n

The first thing to know about <picture><\/code> is that it\u2019s a wrapper for <img><\/code>; think of <picture><\/code> as a kind of invisible, magical <span><\/code> which can feed its <img><\/code> alternate sources.<\/p>\n

The second thing to know about it is that its markup pattern was adapted from <audio><\/code> and <video><\/code>. So alongside our <img><\/code>, we\u2019ll pack our <picture><\/code> full of <source><\/code> elements.<\/p>\n

Each <source><\/code> represents a visually distinct version of the image. We tell the browser which <source><\/code> to use and when, using media<\/code> attributes.<\/p>\n

<picture<\/span>><\/span>\n  <source<\/span> media<\/span>=\"(min-width: 800px)\"<\/span>\n      sizes<\/span>=\"100vw\"<\/span>\n      srcset<\/span>=\"cropped-for-wide-screens--large.jpg 1600w,\n              cropped-for-wide-screens--small.jpg 800w\"<\/span> \/><\/span>\n  <source<\/span> media<\/span>=\"(min-width: 600px)\"<\/span>\n      sizes<\/span>=\"100vw\"<\/span>\n      srcset<\/span>=\"full-image-for-standard-screens--large.jpg 1200w,\n              full-image-for-standard-screens--small.jpg  600w\"<\/span> \/><\/span>\n  <img<\/span>\n    src<\/span>=\"zoomed-in-for-small-screens--small.jpg\"<\/span>\n    srcset<\/span>=\"zoomed-in-for-small-screens--large.jpg 800w,\n            zoomed-in-for-small-screens--small.jpg 400w\"<\/span>\n    alt<\/span> \/><\/span>\n<\/picture<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
The first <source><\/code> element whose media<\/code> attribute matches the current environment wins. The browser picks a resource out of that <source><\/code>\u2019s srcset<\/code>\/sizes<\/code> pair and feeds the picked resource to the <img><\/code>.<\/p>\n
Et voila!<\/em> An image that can change its appearance at breakpoints, as you can see in the examples above.<\/p>\n
But dog-gone-it, we\u2019ve done it again \u2014 by adding a new dimension of adaptability, we\u2019ve multiplied the number of image resources we need to create and manage, making something that was once simple and static, dynamic and complex.<\/p>\n
Cloudinary provides us with tools to manage that complexity.<\/p>\n
Automatic cropping<\/h2>\n
A few months ago, I sat on on a stage at SmashingConf Freiburg, and Christian Heilmann<\/a> asked me how, or if, one could automate the process of cropping in on the most important parts of an image. Stumped, I replied, \u201cI don\u2019t know, uh, something something neural networks?\u201d<\/p>\n
Right after my talk, Guy Podjarmy<\/a> whisked me aside and showed me a few of Cloudinary\u2019s auto-cropping features. I was amazed; now I get to show them to you!<\/p>\n
First things first: in order to crop using Cloudinary, you need to specify a \u201ccrop mode<\/a>\u201d. We\u2019ll start out by using the fill<\/code> crop mode (c_fill<\/code> in URLs), which works like background-fit: cover<\/code> in CSS. The original image will be stretched or shrunk to cover the entirety of its new box, with any extra bits lopped off.<\/p>\n
Let\u2019s say we want to create a 100\u00d7100 square crop of our example image. Here\u2019s how we\u2019d do it:<\/p>\n
\n      Loading code examples<\/span>\n    <\/cld-code-widget>\"100x100<\/p>\n
How about a 640\u00d7360 version?<\/p>\n
\n      Loading code examples<\/span>\n    <\/cld-code-widget>\"640x360<\/p>\n
In addition to providing heights and widths, Cloudinary lets us supply aspect ratios, which can make our URLs a bit easier to read. This URL returns an image identical to the previous one:<\/p>\n
\n      Loading code examples<\/span>\n    <\/cld-code-widget>\"Aspect<\/p>\n
Ok, let\u2019s try something really<\/em> wide:<\/p>\n
\n      Loading code examples<\/span>\n    <\/cld-code-widget>\"Wide<\/p>\n
This crop is\u2026 awkward. The president\u2019s head is popping up from the bottom of the frame like a turnip.<\/p>\n
By default, Cloudinary crops in on an image\u2019s center. But what if we want to crop in on a different focal point? For that, we need to use Cloudinary\u2019s \u201cgravity<\/a>\u201d parameter. Our last crop chopped off the president\u2019s body. Let\u2019s aim lower, anchoring our crop to the bottom of the image:<\/p>\n
\n      Loading code examples<\/span>\n    <\/cld-code-widget>\"Fixed<\/p>\n
Oops! Now we\u2019ve chopped off his head! If only we could center the new, cropped image right on his face\u2026<\/p>\n
\n      Loading code examples<\/span>\n    <\/cld-code-widget>\"Face<\/p>\n
g_face<\/code><\/a> finds a face in the image and centers the crop on it, ensuring that if there is a person<\/em> in our photo, they\u2019ll remain front and center.<\/p>\n
Putting it all to work<\/h2>\n
So! Now we\u2019ve seen how to mark up visually adaptable images using <picture><\/code> and generate alternate crops automatically using Cloudinary. We have everything we need to art direct our example\u2019s giant header image:<\/p>\n
<picture<\/span>><\/span>\n    \n  <!-- wide crop --><\/span>\n  <source<\/span> \n    media<\/span>=\"(min-width: 600px)\"<\/span>\n    srcset<\/span>=\"https:\/\/res.cloudinary.com\/eeeps\/image\/upload\/c_fill,ar_2:1,g_face,f_auto,q_70,w_600\/on_the_phone.jpg 600w,\n    \t\thttps:\/\/res.cloudinary.com\/eeeps\/image\/upload\/c_fill,ar_2:1,g_face,f_auto,q_70,w_1200\/on_the_phone.jpg 1200w\"<\/span>\n    sizes<\/span>=\"100vw\"<\/span> \/><\/span>\n    \n  <!-- standard crop --><\/span>\n  <img<\/span>\n    srcset<\/span>=\"https:\/\/res.cloudinary.com\/eeeps\/image\/upload\/f_auto,q_70,w_400\/on_the_phone.jpg 400w,\n    \t\thttps:\/\/res.cloudinary.com\/eeeps\/image\/upload\/f_auto,q_70,w_800\/on_the_phone.jpg 800w\"<\/span>\n    src<\/span>=\"https:\/\/res.cloudinary.com\/eeeps\/image\/upload\/f_auto,q_70,w_400\/on_the_phone.jpg\"<\/span>\n    alt<\/span>=\"President Obama on the phone in the Oval Office\"<\/span>\n    sizes<\/span>=\"100vw\"<\/span> \/><\/span>\n    \n<\/picture<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
This complex-looking example should now make some sense. We start with an un-cropped <img><\/code> (which includes a srcset<\/code> and sizes<\/code> so that it\u2019ll look good across resolutions), wrap it in a <picture><\/code>, and give it a <source><\/code> sibling. This <source><\/code> represents the cropped version of our image, and will only send a resource to the <img><\/code> when its media<\/code> attribute (min-width: 600px)<\/code> matches the current environment.<\/p>\n
That chunk of code gets us this:<\/p>\n
Room to zoom<\/h2>\n
Let\u2019s proceed to the thumbnails further down the page. Remember, they have the opposite problem \u2014 on small screens, they become too small<\/em>. On small screens, we want to \u201czoom in\u201d on their subjects.<\/p>\n
In order to do so, we\u2019ll use a new crop mode: c_thumb<\/code>. When used with g_faces<\/code>, c_thumb<\/code> zooms all the way in on a face. Like this:<\/p>\n
\n      Loading code examples<\/span>\n    <\/cld-code-widget>\"Face<\/p>\n
One gotcha with this technique: it will sometimes create a different crop, depending on the w<\/code> specified. c_thumb<\/code> will zoom in on the face as tightly as it can at the original image\u2019s full resolution. If we specify a tiny w<\/code>, it will happily scale the resulting, fully-zoomed face down<\/em>:<\/p>\n
\n      Loading code examples<\/span>\n    <\/cld-code-widget>\"Face<\/p>\n
But, with a large w<\/code>, instead of resizing the tightly-cropped-face up, it will pad it with the surrounding image at it\u2019s full resolution:<\/p>\n
\n      Loading code examples<\/span>\n    <\/cld-code-widget>\"Face<\/p>\n
Put another way: c_thumb<\/code> will never upscale your images.<\/p>\n
In order to generate consistent crops for arbitrary ranges of w<\/code> values, we need to crop first, and resize second. We need to learn a new trick: chained transformations<\/em>:<\/p>\n
\n      Loading code examples<\/span>\n    <\/cld-code-widget>\"Face<\/p>\n
If we split two sets of transformations with a forward slash, Cloudinary will apply the first set of transformations and treat the resulting image as input to the second set. Neat.<\/p>\n
Finally\u2014what if we don\u2019t want such a tight crop? To zoom back out from the subject\u2019s face, we need to learn one more parameter: z<\/code>. z<\/code> lets us zoom in or out via a multiplier. Values less than one zoom out, and values greater than one zoom in. So, to zoom out so that the cropped face ends up at a quarter of its original, tightly-cropped size, we specify z_0.25<\/code>.<\/p>\n
\n      Loading code examples<\/span>\n    <\/cld-code-widget>\"Zoomed-out<\/p>\n
And with that, we can smartly zoom our example page\u2019s thumbnails on small screens, using <picture><\/code>, <source><\/code>, and Cloudinary:<\/p>\n
<picture<\/span>><\/span>\n    \n  <!-- full image --><\/span>\n  <source<\/span>\n    media<\/span>=\"(min-width: 600px)\"<\/span>\n    srcset<\/span>=\"https:\/\/res.cloudinary.com\/eeeps\/image\/upload\/f_auto,q_70,w_150\/ronny.jpg 150w,\n    \t\thttps:\/\/res.cloudinary.com\/eeeps\/image\/upload\/f_auto,q_70,w_400\/ronny.jpg 400w\"<\/span>\n    sizes<\/span>=\"calc(8em + 1vw)\"<\/span>\n  \/><\/span>\n    \n  <!-- zoomed + square-cropped thumb for small screens --><\/span>\n  <img<\/span> \n    srcset<\/span>=\"https:\/\/res.cloudinary.com\/eeeps\/image\/upload\/c_thumb,g_face,ar_1:1,z_0.25,w_180\/f_auto,q_70,w_90\/ronny.jpg 90w,\n    \t\thttps:\/\/res.cloudinary.com\/eeeps\/image\/upload\/c_thumb,g_face,ar_1:1,z_0.25,w_180\/f_auto,q_70,w_180\/ronny.jpg 180w\"<\/span>\n    sizes<\/span>=\"calc(4em + 3vw)\"<\/span>\n    src<\/span>=\"https:\/\/res.cloudinary.com\/eeeps\/image\/upload\/c_thumb,g_face,ar_1:1,z_0.25,w_180\/f_auto,q_70,w_90\/ronny.jpg\"<\/span>\n    alt<\/span>=\"President Obama speaking to Ronny Jackson\"<\/span>\n  \/><\/span>\n    \n<\/picture<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
A giant chunk of code like this can be intimidating; the trick is to look at it like a cake \u2013 multiple layers, each one building off of the last. Let\u2019s break it down from the bottom.<\/p>\n
We start, as always, with an <img><\/code> and some alt<\/code> text, describing the image.<\/p>\n
For browsers that can display images (and users that can see them), we include an <img src><\/code> on top of it, which contains the mobile-first default version of our image.<\/p>\n
Finally, we wrap our <img><\/code> in a <picture><\/code> and give it a <source><\/code> sibling, which will, in supporting browsers and on larger screens, allow the image to visually<\/em> adapt, zooming out at a breakpoint when the viewport is sufficiently large.<\/p>\n
Put it all together, and in a modern browser, you get this:<\/p>\n
So there you have it \u2013 visually-adaptive<\/a>, art-directed images using <picture><\/code>, <source><\/code>, and Cloudinary. Art direction opens up new frontiers in responsive design; Cloudinary\u2019s on-the-fly face-detection, cropping, resizing, and optimization capabilities make it easy. So: go forth! And mark up performant, adaptable, progressively enhanced images for all.<\/p>\n
Further Reading on Responsive Images<\/h2>\n
Browsers that understand srcset<\/code> and sizes<\/code> (which, these days, is just about all of them<\/a>) will use these attributes, instead of the src<\/code>, to select a resource to load, giving our image the ability to adapt to fit a range of viewport sizes and display densities.<\/p>\n
The hero image in our example<\/a> is a bit more complex than this, with more breakpoints, more srcset<\/code> resources, and a couple of additional Cloudinary tricks which we\u2019ll cover in our next section. View-source-ing it upon completion of the article is left as an exercise to the reader.<\/p>\n