In his essay Responsive Web Design, Ethan Marcotte talks about how responsive architecture requires physical spaces to respond to the presence of people passing through them. The theory allows for structures to bend, flex and expand as people go through them, rather than leaving immutable, unchanging spaces that are rigid and most probably one size fits all. Marcotte’s essay gives a starting point on how we can use responsive images in the modern day websites.
Images are not scaled or sized down for the device or browser and cannot be purposed to slow down websites and lose customer’s attention. What follows are three tenets for developers and designers to consider regarding responsive images.
Fight Variablity with Variability
There is no one size monitors, now screens come in all types of sizes from tablets, phones and normal screens. We must offer the same content without skipping a beat.
To understand the difference between each of the screen, you must fight variability with variability. That is they must take something that is static, and make it adaptable changeable. Compounding this issue is the presence of high-density pixel displays. These two, newly variable contexts- flexible layout sizes and a diversity of screen densities both provide the same solution. Therefore we must provides images with variable resolution.
One version is never enough
The drawback of responsive design leaves us with a question of how to handle variable images. Should we take the use of high-resolution images in order to take advantage of high-resolution hardware, or should we use small images, which will load faster in low-resolution environment?
The answer is that we don’t have a choice. To fit both of those questions we must be able to say yes to both the questions and be able to have images that fit every scenario in between.
By having multiple resolution images in the website we can send the high resolution images to screen which can display them and the low resolution images to screen that do not. To understand the different step we need, we can take the following steps:
- Establish the various resolution and sizes of images and fill in the various sizes and resolutions in between.
- 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 context, variable refers to two ideas. Firstly, that we must have images that fill the requirement for different formats, depending on the user’s browser. Secondly, there must be difference in the compression and quality, and we must toe the 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 philosophy said that there were only four formats of images which showed any variability and universal acceptance which were 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 falling back on formats when necessary, in browsers that don’t.
The second question is about quality of images. A high quality file will be almost indistinguishable from the original; however it will also be large, file-size wise like the original. 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 will send the high-compression images to hi-dpi screens, where compression artifacts- the blurry images and smudges which are seen on lower 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.