{"id":21436,"date":"2016-11-08T12:58:05","date_gmt":"2016-11-08T12:58:05","guid":{"rendered":"http:\/\/responsive_images_guide_part_1_what_does_it_mean_for_an_image_to_be_responsive"},"modified":"2024-06-01T15:10:49","modified_gmt":"2024-06-01T22:10:49","slug":"responsive_images_guide_part_1_what_does_it_mean_for_an_image_to_be_responsive","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_1_what_does_it_mean_for_an_image_to_be_responsive","title":{"rendered":"Responsive Images Guide, Part 1: What does it mean for an image to be \u201cresponsive\u201d?"},"content":{"rendered":"

\u201cResponsive.\u201d<\/a>\u00a0Where did that term come from, anyways?<\/p>\n

In his sea-changing essay, Responsive Web Design<\/cite><\/a>, Ethan Marcotte explained:<\/p>\n

\n

Recently, an emergent discipline called \u201cresponsive architecture\u201d 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. \u2026 rather than creating immutable, unchanging spaces \u2026 inhabitant and structure can\u2014and should\u2014mutually influence each other.<\/p>\n

This is our way forward.<\/p>\n<\/blockquote>\n

This is a grand and exciting vision! After establishing the problem he hoped to address \u2013\u00a0a radically diversifying device landscape \u2013 Ethan began to sketch a solution by likening \u201cresponsive\u201d 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\u2019t want to build the digital version of that<\/em>?<\/p>\n

\n\nA coder, hunched over, typing furiously\n<\/object>\n<\/figure>\n

As we begin our series of investigations into what it means for images<\/em> to be \u201cresponsive,\u201d I want you to spend a moment with that vision \u2013 that huge, creative ambition. Relish it, cherish it. And then put it on a shelf, as we enter the world of responsive images<\/em> through a much more mundane metaphorical portal.<\/p>\n

Office chairs<\/h2>\n

I want to talk about office chairs, but our story starts with cockpits.1<\/a><\/sup> In the 1940s, the United States began making thousands of airplanes. Planes designed using a vast dataset \u2013\u00a0averaging out servicemens\u2019 measurements to craft the perfect cockpit for the average man.<\/p>\n

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 \u201caverage\u201d\u00a0cockpit fit almost nobody \u2013 less than 5% of pilots, to be exact. In short order, cockpits were made adjustable<\/em>, 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. \u201cEqual fit\u201d\u00a0led to enormous gains in both performance and opportunity.<\/p>\n

Thus, \u201cergonomics\u201d was born, and after the war the idea that we should imbue mass-produced artifacts with affordances for human diversity spread \u2013 all the way to the humble office chair.<\/p>\n

\n\nOur coder adjusts their chair \u2014 ah! That\u2019s better!\n<\/object>\n<\/figure>\n

Responsive images are like desk chairs. While the idea of creating robotic, shapeshifting spaces appeals, responsive images<\/em> aren\u2019t as spectacular as all that. Their aims are humble and true: equal fit<\/em> and ergonomics<\/em>. Most of the time, responsive images are invisible; as forgettable and indispensable as your chair. Visually \u201cboring,\u201d but in service of goals that are reflective of what\u2019s truly and deeply exciting about creating on the web: improved performance and expanded opportunity.<\/p>\n

One size fits nobody<\/h2>\n

Time was, most browsers ran on on same-ish-sized screens. De-facto \u201cstandards\u201d like the 960 grid<\/a> embraced this uniformity, and encouraged designers to craft fixed-size cockpits<\/del>layouts<\/ins> 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 \u201cSave for web\u201d at exactly that size. Every visitor would then receive exactly the same resource, which provided precisely the amount of data that they needed \u2013\u00a0no more and no less.<\/p>\n

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

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

Just as single-sized cockpits couldn\u2019t cope with the diversity of human form, single-resource images have failed to accommodate a newly diversified device landscape.<\/p>\n

Worst-case scenarios<\/h2>\n

And they\u2019ve failed spectacularly! You see, we, on the web, haven\u2019t merely targeted an average \u2013 we\u2019ve optimized for an extreme. For years, the only way to take advantage of new, high-end hardware \u2013\u00a0Retina displays, huge monitors \u2013\u00a0was to craft enormous resources and send those resources to everybody<\/em>. The result? A slow-motion performance disaster:<\/p>\n

\"Imagess<\/p>\n

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<\/em>. Looked at one way, this is a catastrophe \u2013\u00a0the web\u2019s glorious promise of universal access to information, blighted by 1MB stock photos of people smiling at salads<\/a>. But in another light, this is catastro-tunity!<\/em> If we want to make the web faster, images are swollen pieces low-hanging fruit: ripe for the picking.<\/p>\n

So: how can we improve image performance?<\/p>\n

Fight fire with fire<\/h2>\n

What do robotic architecture, ergonomic chairs, responsive design and responsive images have in common<\/em>? All of them:<\/p>\n