In his essay, responsive Web design, Ethan Marcotte considers the idea of "responsive architecture," and how that discipline can ask "physical spaces to respond to the presence of people passing through them." This practice allows for structures that "bend, flex, and expand as crowds approach them," rather than leaving "immutable, unchanging spaces" that are rigid and, essentially one-size-fits-all. Marcotte's essay provides a starting point for considering how we can best implement images for today's modern websites.
Images that are not scaled or sized for the device or browser or purpose at hand slow down websites and lose visitors' attention. What follows are three tenets for developers and designers to consider regarding responsive images.
Fight Fire With Fire (or Variability With Variability)
One size fits nobody. There is no longer one standard monitor dimension. We now must offer the same content on tablets, watches, TVs, e-readers and smartphones without our site load times skipping a beat.
To ensure a smooth transition between each screen size, designers must fight variability with variability. That is, they must take something static, and make it adaptable, changeable. Compounding this issue is the myriad of high-density pixel ("retina") displays. 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.
One Version Is Never Enough
The draw of responsive design leaves us with a few questions about how we implement images. It also leaves us with, seemingly, a choice to make. Should we use high-resolution images in order to take advantage of high-resolution hardware, or should we use small images, which will load fast in low-resolution environments?
The answer is that we really do not have a choice. With today's dynamic Web design environment, we must be able to say "yes" to both questions and provide versions of images that fit every scenario in between.
By offering a number of different versions (in size and resolution) of the same image, we can send high-resolution versions to website visitors who require them, and we can also serve lower-resolution versions for sites that do not. To understand how many different versions we need, we can take the following steps:
1. Establish the limits of our range of sizes and resolutions and fill in the various sizes and resolutions in between
2. Mark those multiple, alternate versions up using
new responsive image markup so that the browser can load the version which best fits the user's screen resolution and viewport size.
Variable Encoding Is King
In this instance, "variable encoding" refers to two ideas. First, that we must deliver an image in different formats, depending on the user's browser. Second, that there will always be tradeoffs between quality and compression, and we must toe that line carefully but as best we can.
To answer the question of formats, we can do our best to let the browser decide for us. Older philosophies for encoding images felt that there were really only four image formats that offer any sort of universal acceptability: GIF, JPEG, PNG or SVG. However, today's responsive, variable-format images allow us new techniques so that we can use other, newer, better formats in browsers that support them - while still falling back to old formats, when necessary, in browsers that don't.
The second question is one of quality. A high-"quality" file will be nearly indistinguishable from the original; however, it will also be large, file-size-wise. A low-"quality" file may contain distracting artifacts, but it will weigh much less than a high-quality file would. To strike a balance between the two, we can do things like send lower-quality/higher-compression images to hi-DPI (dots per inch) screens, where compression artifacts - the little blurry pixels and smudges you see on low-quality images - are less visible. That's just one example of how we can address the need for variable quality. Before the age of responsive Web design, we could only encode an image with one quality setting and send it to every device and browser type. Today, we must focus on offering the same image in a variety of qualities.
Responsive Images: The Unsung Hero
Just a one-second delay in website load time can lead to a
seven percent reduction in site conversions or
eat into a company's bottom line. Images make up about
56 percent of most websites, and optimizing them goes a long way toward ensuring organizations can blend effective experiences with fast load times.
Responsive images are boring, but they enable us to design the immersive and engaging experiences today's consumers require, without sacrificing quality or page load speed. Gone are the days when saving one version of an image and using it across all versions of a website is an acceptable practice. Modern Web development requires responsive images.
Creating a responsive Web environment is tricky, and it requires a delicate balance. But building this dynamic environment is necessary in a world of varying screen sizes and device functions. To create the experiences consumers demand and, in the process, secure a more sustainable bottom line, organizations must turn to responsive images and the benefits they offer or ignore them at their own peril.
About the Author Eric Portis is the developer evangelist at
Cloudinary, a media management platform for developers.
