Ergo, a new series of articles called Responsive Images 101 that will cover everything from why we need responsive images to how to pick the right responsive images solution.
Let's dig in!
What are Responsive Images?
The idea of having the browser resize images has been a key part of responsive web design from the beginning.
However, simply resizing images can mean that users will download images that are far too large. Take this Apple Watch image:
The largest version of that image, used for large, high density displays like the iMac, is 5144x1698 pixels. It weighs in at 398K.
Delivering an image that large to a device like the Blackberry Curve 9310—with its display resolution of 320x240 pixels—doesn't make any sense. We need a smaller image.
Therefore, when I talk about responsive images, what I'm referring to is:
A method for providing the browser with multiple image sources depending on display density, size of the image element in the page, or any number of other factors.
Often, when people talk about responsive images, they are referring to solutions for inline images. Why? Let's take a look at our old friend the <img> element:
The fact that <img> only provides for a single image source has been the biggest challenge. But responsive images aren't limited to HTML. We'll look at CSS techniques later in this series.
Understanding your use case
When you start looking at responsive images solutions, it can be overwhelming to figure out which solution makes the most sense for your image. The key to knowing what solution will work best is to know what use case you're solving for.
The Responsive Images Community Group (RICG) defined multiple use cases. I encourage you to read through the full list of use cases—there is some good stuff in there—but for our purposes, I'm going to simplify things into two major use cases: resolution switching and art direction.
Resolution switching is the most common use case. It refers to any scenario where you all you want to do is provide different sizes of an image and you're not making any modifications to the content or aspect ratio of the image.
Resolution switching not only encompasses flexible images that change based on the size of the viewport, but also scenarios where you want to provide different image sources based on the display density (a.k.a., retina images).
Whenever you need to make changes to content or aspect ratio of an image based on the size of the image in the page, you're doing what the RICG refers to as art direction.
When the image is displayed at larger sizes, it makes sense for the image to show the automobile factory in the background. The background helps explain where the event took place and adds to the image. But look what happens when we scale the image down to fit a smaller screen.
At that size, you can barely recognize Obama. You can’t make out his face. Instead of simply resizing the image, it may make sense to crop the image to get rid of some of the background and focus in on him. The end result is an image that works better at the smaller size:
Art direction isn't limited to cropping images. For example, on the Nokia site where they showed off the new version of their browser, you can see how the image changes from landscape to portrait based on the size of the screen:
As Stephanie Rieger explained at the Breaking Development conference, the decision was made to change the image so that the browser itself could be seen more easily. If the image shrunk too much, the browser chrome became unreadable which is why the design switches from landscape to portrait.
The most common place I see art direction is for images that contain text. We can see an example at the CB2 site and one of its hero images.
This image contains three photographs, two logos with type in them, and a stamp and text that both use thin strokes. If we simply resized this image to 320 pixels wide, the text would be too small to be readable.
CB2 doesn't currently have a responsive site, but it does have a mobile web site where we can see how they handle this hero image on small screens.
In order to make the image work on small screens, CB2 does the following:
Changes from three photographs to two
Modifies the aspect ratio to make the image taller
Redesigns the layout of the image
As you can see the changes necessary to make an image work on small screens can be substantial.
Let the games begin
Now that we've got the definitions out of the way, we can start looking at how these solutions work. Read more in Part 2: Img Required.
When you start incorporating the new responsive images standards across your site, the task can seem daunting. How do you know which standards to use and where? How will you maintain the new markup and image sizes?
We have found that a good first step is a responsive images audit.
Much like a content audit, a responsive images audit is designed to help you take stock of the images you have on your site and how they are being utilized.
The output of the audit is often a spreadsheet describing different types of images, the templates they are used on, and what solution you plan on implementing for those images.
Sample questions to ask about images
Here are some sample questions you should consider asking about the images on your site:
Where are the source files and what is the process for publishing?
This may seem unrelated to the technical questions of how the responsive images will be implemented, but my experience has been that knowing where the images are coming from, where they are stored, and if anyone needs to modify the image before it is posted can dictate what solutions are practical.
Consider this your reminder that people are still involved and you need to understand the people part first.
Is there a big difference between smallest and largest image size?
We had a client who had badges for awards and types of recognition. These badges were displayed at a small size even when the page was large. We found that even if we had the largest size possible at retina density, the images were about same in file size. So why provide multiple image sizes?
In addition, the images came from third parties and they didn’t have the source which was another good reason to simply use the largest image and have the browser resize it.
If there are representative images, then we can save them at various sizes in the range they will be used in the template and make a determination of how many image sources we need to provide.
In situations where images come from user generated content, it can be harder to find representative images from which you can determine image breakpoints. In that case, we know we’re going to have to make an educated guess about what will work.
Do we want to support multiple image formats?
Perhaps we’re using a lot of alpha channel images and want to provide JPEG 2000 for those whose browser supports that image format. Or perhaps we want to provide WebP alternatives.
That is a simple example with a single file per source element, but there is no reason you can’t use the full power of the srcset attribute to provide multiple files per file type. You can even add the sizes attribute to give you more control.
So long as you don’t use the media attribute, you’re still giving the browser the information it needs to pick the right image source without dictating to it that it must use a specific one.
And unless you’re doing art direction, you should be striving to provide the browser with options, but letting the browser pick which source will work best.
The are a few differences between srcset and image-set(), but the biggest difference is that image-set() deals with CSS images whereas srcset is an attribute on the <img> element.
How we forgot about image-set()
In 2012, the image-set() spec was still under development and we were cautioned against using it at the time. Because media queries were available in CSS, handling CSS images in responsive designs wasn’t as difficult as handling responsive images in HTML itself.
So the Responsive Images Community Group focused on how to solve the <img> problem. And I gradually forgot about image-set() thinking that it was moving forward in the CSS Working Group and browsers.
It seems that I may not have been the only one who forgot about image-set() because despite being two years older than <picture>, it is still only supported under prefixing in Chrome and Safari.1 Worse, it isn’t on the roadmap for either Internet Explorer or Firefox.
We need image-set() for resolution switching because it gives browsers the choice of what size image source will work best. And in cases where all we are dealing with is resolution switching, the browser is better informed than we are as web authors.
Help get image-set() into browsers
We need your help to make sure that image-set() is implemented in browsers. Help us by voicing your support and ask browsers to prioritize this feature:
Responsive images are landing soon and many organizations are looking for ways to resize images. Thankfully, there are a number of startups, established companies, and open source solutions for image resizing.
Figuring out what to include and what to ignore was difficult.
For example, GD and ImageMagick are available on many platforms and you could build your own service using them. Many CMS tools have built-in image resizing tools.
I focused on services and software that provided a level of abstraction (e.g., you can ask for image resizing via a URL) or were specifically focused on responsive images.
Does the image resizer try to detect the correct image size and would that be desired?
The spreadsheet has a column for detection to indicate whether or not the image resizer tries to automatically detect what size of image to request or deliver.
With the responsive images specification landing in browsers soon, I’m not sure if detection is desirable. The benefit of srcset and sizes is letting the browser choose what source is best.
What other image manipulation is offered?
Many of the image services offer services that can crop, filter, and otherwise manipulate images. Some even add things like focal point or facial recognition.
Performance is the missing column
As long as you’re centralizing images processing, you should try to find a service that will compress them as much as possible and provide other performance benefits such as caching and CDN support.
If I were evaluating services, I would be looking for these things, but comparing image compression is tough because it is a balance of raw file size and image quality the requires a judgment call.
Cost is a column I didn’t want to add
When I published this spreadsheet originally, I got a lot of people asking for column to compare price. I resisted adding it until recently. And I only report on whether the service is free or paid.
Comparing prices in the spreadsheet is pointless. Every service that charges varies pricing based on the volume of images. The prices will change in the future, and I don’t want to maintain that information. And the services are different.
I encourage you to explore the services themselves. Some are quite reasonably priced and the expensive ones offer a ton of features.