Cloudinary Blog

Responsive Images Guide, Part 1: What does it mean for an image to be “responsive”?

Responsive Images Guide, Part 1: What does it mean for an image to be “responsive”?

“Responsive.” Where did that term come from, anyways?

In his sea-changing essay, Responsive Web Design, Ethan Marcotte explained:

Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. … rather than creating immutable, unchanging spaces … inhabitant and structure can—and should—mutually influence each other.

This is our way forward.

This is a grand and exciting vision! After establishing the problem he hoped to address – a radically diversifying device landscape – Ethan began to sketch a solution by likening ”responsive“ future-websites to robotic, flexible, massive, and intelligent structures, which can shape-shift before our very eyes, to suit our ever-changing needs. Who wouldn’t want to build the digital version of that?

A coder, hunched over, typing furiously

As we begin our series of investigations into what it means for images to be “responsive,” I want you to spend a moment with that vision – that huge, creative ambition. Relish it, cherish it. And then put it on a shelf, as we enter the world of responsive images through a much more mundane metaphorical portal.

Office chairs

I want to talk about office chairs, but our story starts with cockpits.1 In the 1940s, the United States began making thousands of airplanes. Planes designed using a vast dataset – averaging out servicemens’ measurements to craft the perfect cockpit for the average man.

But as war began, these one-size-fits-all planes began crashing at an alarming rate. A researcher named Gilbert S Daniels figured out why: the “average” cockpit fit almost nobody – less than 5% of pilots, to be exact. In short order, cockpits were made adjustable, so that pilots could ratchet and slide their seat and controls into reach. Crash rates declined, pilots stopped dying, and whole new classes of people (short people! tall people! women!) were able to fly. “Equal fit” led to enormous gains in both performance and opportunity.

Thus, “ergonomics” was born, and after the war the idea that we should imbue mass-produced artifacts with affordances for human diversity spread – all the way to the humble office chair.

Our coder adjusts their chair — ah! That’s better!

Responsive images are like desk chairs. While the idea of creating robotic, shapeshifting spaces appeals, responsive images aren’t as spectacular as all that. Their aims are humble and true: equal fit and ergonomics. Most of the time, responsive images are invisible; as forgettable and indispensable as your chair. Visually “boring,” but in service of goals that are reflective of what’s truly and deeply exciting about creating on the web: improved performance and expanded opportunity.

One size fits nobody

Time was, most browsers ran on on same-ish-sized screens. De-facto “standards” like the 960 grid embraced this uniformity, and encouraged designers to craft fixed-size cockpitslayouts tailored for the average screen. Static layouts on same-y screens meant that sizing images was a snap. One simply had to measure precisely how many pixels an image occupied within a layout and “Save for web” at exactly that size. Every visitor would then receive exactly the same resource, which provided precisely the amount of data that they needed – no more and no less.

Over the past decade, this set of one-size-fits-all practices has become, well, problematic. The web’s reach has expanded beyond 1027×768 monitors, to phones, TVs, e-ink screens, heck, even a few brave smartwatches – hardware of every shape and size. Hi-DPI screens mean that a pixel is no longer a pixel; the gap between low- and high-powered hardware, and the newest and oldest browsers continues to widen; and a new revolution – wide-gamut color on the web, is just over the horizon.

To cope with this ever-growing diversity, the industry has embraced Ethan’s philosophy of Responsive Design. CSS Media Queries made responsive layout possible, but images – whose resources are intrinsically fixed in height, width, color-depth, and content – have been stuck in the fixed, one-size-fits-all past.

Just as single-sized cockpits couldn’t cope with the diversity of human form, single-resource images have failed to accommodate a newly diversified device landscape.

Worst-case scenarios

And they’ve failed spectacularly! You see, we, on the web, haven’t merely targeted an average – we’ve optimized for an extreme. For years, the only way to take advantage of new, high-end hardware – Retina displays, huge monitors – was to craft enormous resources and send those resources to everybody. The result? A slow-motion performance disaster:

Imagess have largely propelled the startling rise in average page size

Which brings us to the present day. As of this writing, images account for 64% of the total byte-size of the average page. Measured by weight, most of the web is images. Looked at one way, this is a catastrophe – the web’s glorious promise of universal access to information, blighted by 1MB stock photos of people smiling at salads. But in another light, this is catastro-tunity! If we want to make the web faster, images are swollen pieces low-hanging fruit: ripe for the picking.

So: how can we improve image performance?

Fight fire with fire

What do robotic architecture, ergonomic chairs, responsive design and responsive images have in common? All of them:

  • …take something static, and make it adaptable; changeable
  • …result in products which are more complex than their static predecessors
  • …were responses to, and strategies for dealing with, newfound variability in how the product was, or could be used.

In short, they all fight variability with variability.

What sorts of variability are talking about, when it comes to images?

The most obvious sort is variable size. Responsive layouts reshuffle at breakpoints and stretch and squish between them to look good at a wide range of sizes. In 2009, it made total sense to “Save for Web” at the only size your viewers would ever need. In 2016, our images need to be as flexible as our layouts.

Compounding this, our static assumptions about pixels themselves have broken down. High-density (aka “Retina”) displays are legion.

These two, newly variable contexts – flexible layout sizes and a diversity of screen densities – both have the same solution. We need to provide images with variable resolution. We’ll cover this next, in part two of this series.

Variable-resolution images are the most common responsive image use case. But once we’ve opened the door to images whose resources can vary to meet a diversity of contexts, we can do much else besides.

In part three of this series, we’ll explore the disjointed browser format support landscape (which we can address by supplying images with variable formats), and the vast diversity of network speeds (which we can address by dynamically adjusting the amount of lossy compression we apply to our images). Both techniques fall under the umbrella of supplying images with variable compression.

Finally, in part four, we’ll break out of our invisible, ergonomic mode, and think about how we can make our images visually responsive, using a technique called art direction. When we art direct, we vary our images’ actual, visible content in order to tailor them to particular contexts. When we art direct, we’re not just marshaling variability to improve performance; we’re wielding it to solve problems of design.

And there you have it: a high-level overview of what it means for an image to be “responsive.” Responsive images are variable, dare I say ergonomic, images, which strive to provide equal fit in order to improve performance and extend opportunity.

Next time, we’ll dive into the most common responsive image use case: variable-resolution images.


  1. This story of averages, desk-chairs, and cockpits comes from the On Average episode of the amazing podcast, 99% Invisible. ↩︎

Recent Blog Posts

Build a WhatsApp Clone with Automatic Image Optimization

In the previous post, we showed how to upload images to a Cloudinary server. In this part, we will play with some of the features we see on the WhatsApp technology. After you or your users have uploaded image assets to Cloudinary, you can deliver them via dynamic URLs. You can include instructions in your dynamic URLs that tell Cloudinary to manipulate your assets using a set of transformation parameters. All image manipulations and image optimizations are performed automatically in the cloud and your transformed assets are automatically optimized before they are routed through a fast CDN to the end user for an optimal user experience. For example, you can resize and crop, add overlays, blur or pixelate faces, apply a variety of special effects and filters, and apply settings to optimize your images and to deliver them responsively.

Read more
With automatic video subtitles, silence speaks volumes

The last time you scrolled through the feed on your favorite social site, chances are that some videos caught your attention, and chances are, they were playing silently.

On the other hand, what was your reaction the last time you opened a web page and a video unexpectedly began playing with sound? If you are anything like me, the first thing you did was to quickly hunt for the fastest way to pause the video, mute the sound, or close the page entirely, especially if you were in a public place at the time.

Read more
Impressed by WhatsApp Tech? Build WhatsApp Clone with Media Upload

With more than one billion people using WhatsApp, the platform is becoming a go-to for reliable and secure instant messaging. Having so many users means that data transfer processes must be optimized and scalable across all platforms. WhatsApp is touted for its ability to achieve significant media quality preservation when traversing the network from sender to receiver, and this is no easy feat to achieve.

Read more
New Google-powered add-on for auto video categories and tags

Due to significant growth of the web and improvements in network bandwidth, video is now a major source of information and entertainment shared over the internet. As a developer or asset manager, making corporate videos available for viewing, not to mention user-uploaded videos, means you also need a way to categorize them according to their content and make your video library searchable. Most systems end up organizing their video by metadata like the filename, or with user-generated tags (e.g., youtube). This sort of indexing method is subjective, inconsistent, time-consuming, incomplete and superficial.

Read more

iOS Developer Camp: The Dog House

By Shantini Vyas
iOS Developer Camp: The Dog House

Confession: I’m kind of addicted to hackathons. Ever since graduating from Coding Dojo earlier this year, I’ve been on the hunt for new places to expand my skills and meet new people in the tech space. iOS Developer Camp’s 10th Anniversary event bowled me over. Initially, because of its length. 48 hours? Yeesh. I had no idea that those 48 hours would change my life. But let’s first get a little backstory on my favorite topic: dogs.

Read more