Cloud Four Blog

Technical notes, War stories and anecdotes

Responsive Images 101, Part 4: Srcset Width Descriptors

In Part 3, we looked at display density descriptors and concluded that they are great for fixed width images, but are insufficient for flexible images.

Flexible images is where srcset’s width descriptors shine.

Width descriptors

The syntax for width descriptors is similar to that of display density descriptors. The value of the srcset attribute is a comma-separated list of image sources and descriptors.

Srcset syntax with width descriptors. Repeated below.

The difference is that instead of having 1x, 2x, and other values representing the density, we now list the width of the image source such as 320w, 480w, etc.

<img src="cat.jpg" alt="cat" 
  srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w">

The width of the image source can cause some confusion. Width descriptors are looking for the resolution of the source file.

In other words, if you open the image in an image editor, what does it say the resolution is? Grab the width and put it in the srcset attribute.

The browser picks the best source?

When you use width descriptors, you’re providing the browser with a list of images and their true widths so that it can select the best source. How does the browser do that?

Your first instinct is probably to say that the browser looks at the size of the element in the page and compares it to the list of source sizes. That makes sense, but it isn’t how the selection work.

See, when a browser starts downloading images, it often doesn’t know the size of the image in the page.

Browser pre-loader and speculative asset downloading

If you look at a timeline of how a browser renders a page, you’ll notice something striking.

AnEventApart.com Chrome timeline

Shortly after the browser downloads the HTML, it requests CSS and JavaScript. But before the CSS and JavaScript is done loading, the browser starts downloading images.

Because neither the CSS nor JavaScript is complete, the browser is downloading images without knowing what the layout of the page will be. And without knowing the layout, it doesn’t know what size the image element will be.

BTW, this pre-loading behavior is why we can’t solve inline responsive images using CSS or JavaScript. They aren’t available when the browser starts downloading.

The only thing that the browser does know is the size of the viewport. Once we move past display density descriptors, everything hinges on the size of the viewport.

Why does this matter?

The viewport can be a poor substitute for the actual size of the image. Take the images on Walmart’s Grocery site:

Small screen version of delivery.walmart.com showing that images are nearly full width of page.

On narrow viewports, the images are nearly the same size as the viewport width. They are certainly close enough to work.

Wider screens, however, are a different matter:

Wide screen version of delivery.walmart.com showing how images are much smaller than the viewport.

In the second example, the viewport is 1540px wide, but the images are only 254px wide. Knowing the size of the viewport won’t tell the browser enough information to be able to select the right image source.

Sizes to the rescue!

How do we tell the browser about the size of the image in the page so that it can download the right source from our srcset list? Use use the sizes attribute!

Read more in Part 5: Sizes.


Responsive Images 101
  1. Definitions
  2. Img Required
  3. Srcset Display Density
  4. Srcset Width Descriptors
  5. Sizes
  6. Picture Element
  7. Type
  8. CSS Responsive Images
  9. Image breakpoints

Responsive Images 101, Part 3: Srcset Display Density

Ever since Apple launched a retina display on the iPhone 4, web designers have been looking for a way to handle high density displays. That is where srcset and its display density descriptors come in.

Resolution switching uses srcset

As a reminder, display density is a resolution switching use case. And when we’re solving for resolution switching, we want to use srcset.1

The reason why we want to use srcset is because it gives the browser choice. When we use the media attribute provided by the <picture> element, we’re dictating to the browser what image it must use. That makes sense for art direction.

But when it comes to resolution switching, the browser knows best what image will work. It can make decisions based on factors that we’re not privy to such as network conditions or user preference.

So unless we are doing art direction, we should strive to give the browser options and let it make smart decisions.

Display density descriptors

The syntax for display density is fairly straight forward:

srcset example repeated below

The srcset attribute is added to an <img> element. The value of srcset contains a comma-separated list. Each item in the list contains the path to an image and the density of that image provided as a multiple (e.g., 1x, 2x, 3x…).

<img src="cat.jpg" alt="cat" srcset="cat.jpg, cat-2X.jpg 2x">

The display density values—the 1x, 2x, etc.—are referred to as display density descriptors. If a display density descriptor isn’t provided, it is assumed to be 1x.

That seems easy…

It is easy—assuming all you care about is display density. I have my doubts about how often that will happen.

Let’s take a look at the Apple Watch image from Part 1:

Apple Watch Hero Image

As mentioned previously, the image is 5144×1698 pixels and 398K in its 2x incarnation. There is also a 1x version. Let’s compare them to the size that would make sense for a single density, Blackberry Curve 9310:

Image Width Height File Size
2x large 5144 1698 398K
1x large 2572 849 256K
320px, Single Density 320 106 8K

For the final row in the table, I resized the image to 320px wide and saved as a JPEG in order to estimate what it would be.

It should be obvious that two sizes of an image aren’t sufficient. Sure, we could start at 320 as 1x and then rewrite our markup to look something like this:

<img srcset="cat.jpg, cat-2X.jpg 2x, cat-3x.jpg 3x, […], cat-16x.jpg 16x">

That will get us from 320px to the 5144px of the largest image, but it seems insane to me.

And this highlights another reason why I find the display density descriptors to be less desirable than other solutions. I don’t have any interest in keeping track of all of the different display densities available.

Do we want to provide 1x, 1.5x, 2x, 3x variants? What about accounting for things like the iPhone 6 Plus’s downsampling?

Not to mention what happens when you start working with flexible images. Now you have multiple densities at multiple image breakpoints. And sometimes you’re repeating your image sources because 2x at a small size could be the same as 1x resolution at a larger image breakpoint.

It gets messy quickly.

Display density descriptors are best for fixed width images

The moment you move beyond providing alternate densities of a fixed width img element, the display density descriptor becomes unwieldy and inadequate to the task.

What do you need instead? Part 4: Srcset Width Descriptors.


Responsive Images 101 Series
  1. Definitions
  2. Img Required
  3. Srcset Display Density
  4. Srcset Width Descriptors
  5. Sizes
  6. Picture Element
  7. Type
  8. CSS Responsive Images
  9. Image breakpoints

Footnotes
  1. Unless we’re providing different image formats which we will cover later.

Responsive Images 101, Part 2: Img Required

One of the main reasons why we need solutions for responsive images is because the <img> element is insufficient. It only has one src and we need multiple sources.

Given that fact, it may be surprising that we’re going to start by talking about the <img> element instead of the new, shiny toys like <picture> and srcset.

No matter what responsive images solution you use, <img> is required.

The <img> element is critical for all of the inline responsive images solutions. The way I like to think about it is that the img is a box into which all of the responsive image rules are added and applied.1

img-required

You can use JavaScript to watch for changes in the currentSrc of the img element. Here is an incredibly simple script that watches for changes and writes them to the page2:

(function() {
  var currentSrc, oldSrc, imgEl;
  var showPicSrc = function() {
    oldSrc     = currentSrc;
    imgEl      = document.getElementById('picimg');
    currentSrc = imgEl.currentSrc || imgEl.src;
 
    if (typeof oldSrc === 'undefined' || oldSrc !== currentSrc) {
      document.getElementById('logger').innerHTML = currentSrc;
    }
  };
 
  // You may wish to debounce resize if you have performance concerns
  window.addEventListener('resize', showPicSrc);
  window.addEventListener('load', showPicSrc);
})(window);

You can see this in action on this demo page3. Resize the browser to see the currentsrc change.

Why does this matter?

The fact that the <img> will always show the current source means that any existing JavaScript that interacts with the <img> element will continue to work as expected.

(Not to mention the decades worth of code that browser-makers have written to handle images correctly.)

As Eric Portis puts it, “we’re progressively enhancing the img” when we use the new responsive images standards.

Do you need more than img?

There are some scenarios where the img element alone might be enough:

  • A fixed width, single density web page — If you don’t have a responsive design and aren’t worrying about “retina” displays, then the img element is all you need.

  • Small differences in file size — For some images there isn’t much difference between the file size of the largest and smallest variants. We’ve seen this with badges, icons and other small images that don’t change much as the viewport changes. If there isn’t much difference in file size, a single img source may suffice.

  • Using vector-based images like SVG — If you’re using a vector-based image format like SVG, the image can scale without providing multiple sources. In that case, you may be able to link directly to the SVG as the single source for the img.

    This depends, of course, on whether the browsers you support also support SVG. You may be better off using the picture element to provide alternative image formats as fallbacks—something I’ll cover later in this series.

What if you want to support high-density displays?

If you want to support high-density displays, then we need to supersize our <img> element. Learn how in Part 3 in this series: Srcset Display Density.


Responsive Images 101 Series
  1. Definitions
  2. Img Required
  3. Srcset Display Density
  4. Srcset Width Descriptors
  5. Sizes
  6. Picture Element
  7. Type
  8. CSS Responsive Images
  9. Image breakpoints

Footnotes
  1. Box icon made by Daniel Bruce from www.flaticon.com and is licensed under CC BY 3.0
  2. Thanks to Lyza and Erik for helping with the JavaScript.
  3. Demo page forked from Google Chrome Team picture element example that was used in Pearl Chen‘s great article on Built-in Browser Support for Responsive Images.

Responsive Images 101, Part 1: Definitions

Over the last few years, we've written a quite a few articles about responsive images. Now that responsive images have landed in browsers, it seemed like a good time to step back and cover the basics for those who are just starting to tackle responsive images.

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:

Apple Watch Hero 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:

<img src="giraffe.jpg" alt="Giraffe">

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

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.

Example of resolution switching using a photo of Michelle Obama

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).

Art Direction

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.

Take for example the following photo of President Obama speaking at a Chrysler plant.

Obama speaking at Chrysler plant

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.

Obama speaking at Chrysler plant shrunk to 100 pixels wide. Obama himself is tiny in the picture at this size.

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:

Obama speaking at Chrysler plant shrunk to 100 pixels wide and cropped so Obama can be seen better.

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.

CB2 hero image with text

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 hero image with text shrunk to 320 pixels making the text unreadable.

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.

CB2 mobile hero image

In order to make the image work on small screens, CB2 does the following:

  • Changes from three photographs to two
  • Removes text
  • 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.


Responsive Images 101 Series
  1. Definitions
  2. Img Required
  3. Srcset Display Density
  4. Srcset Width Descriptors
  5. Sizes
  6. Picture Element
  7. Type
  8. CSS Responsive Images
  9. Image breakpoints

Responsive Hero Images

Hero images present unique challenges for responsive designs. During a recent responsive images audit, we found a unique solution which I wanted to share.

What are hero images?

Until a couple years ago, I was unfamiliar with the term hero image. A friend who worked for a large agency used the term, and I had to ask what it meant. I don’t know if it is a common description and I was living under a rock. Or maybe it is agency jargon.

But just in case I’m not the only one who doesn’t know what a hero image is, a hero image is a large promotional image like the one from Target below:

Target.com hero image

Responsive hero images?

Hero images often present unique problems for responsive designs. Many hero images have text in the image itself. When text is in an image, it often means that the responsive image will fall into the art direction use case instead of the easier to solve resolution switching use case.

We can see an example of why the art direction is important by looking at the CB2 site and one of its hero images.

CB2 hero image with text

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 hero image with text shrunk to 320 pixels making the text unreadable.

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.

CB2 mobile hero image

In order to make the image work on small screens, CB2 does the following:

  • Changes from three photographs to two
  • Removes text
  • Modifies the aspect ratio to make the image taller
  • Redesigns the layout of the image

As you can see the changes necessary to make a hero image work on small screens can be substantial.

Requirements for hero images

Our usual process for responsive designs is to understand the goals, needs, analytics, and user feedback for each pattern in the design. We use this information to understand the requirements for the pattern and to prioritize what the small screen version needs to accomplish.

The full requirements for hero images can be summed up as:

A box for marketing.

In my experience, any attempt to narrow down what can go into the box will meet resistance. The people responsible for marketing understandably don’t want their future options limited.

Ideal world solutions

As we were brainstorming ideas on what to do for this client, we kept finding ourselves referring to what we would do in an ideal world.

In an ideal world, we’d:

  • Build complex HTML5-based animations like Apple.

    Apple has created rich pages that react as you scroll and otherwise interact with them. They make the old days of flash animation look quaint.

    They are also one of the wealthiest companies on the planet and only release new products once a year. You may not have similar resources.

  • Remove text from images, put it in HTML, and use CSS to overlay the image.

    This makes a ton of sense. If we separate out the text from hero images, then we can adjust the placement of the text as the viewport changes.

    Sites like Crate and Barrel have established a specific text treatment and placement for all promo images.

    Crate and Barrel Hero Image Example

    However, this again is an ideal world situation. All of the photography must have areas that are designed to accommodate the text. You can see how Crate and Barrel must ask all of their photographers to keep this in mind.

    That solution may not work depending on the requirements of the brand and how frequently the images are being updated.

Real world conditions

We’re often not working in an ideal world. Take Free People for example:

Free-People-Casual-Monday-00-870

Free People has a strong artistic vision for their site. The combination of type and imagery matters. And they update the images daily.

If you’re updating hero images on a daily or weekly basis, many of the ideal world solutions are impractical. Not to mention the fact that the people responsible for creating the hero images may be graphic designers, not web designers or developers.

Give them <picture> and let them have their box

After striking out on the idealistic solutions, we started looking at ways to give the designers as much control as they might need.

We thought, “We should use the picture element to give them a box that marketing can use. Then their designers would have complete control to decide how many image sources they need and where the breakpoints should be.”

Responsive image breakpoints FTL!

Doing this would have been easier for us, but it would have be a jerk move.

Imagine what this would have meant for the designers who create these images. Not only does the responsive design mean that they have to create multiple versions of hero images now.

But we’d also asking them to figure out how many versions of the hero images they need to make and where the image breakpoints should be. And they need to figure this out every day for every image they create.

Like I said: a jerk move. Don’t do this.

Using hero image text to determine breakpoints

After striking out on several different solutions, we realized that the text might be the key. If it weren’t for the text in these hero images, the hero images would fall under the resolution switching instead of art direction use case.

We wondered if there was a way look at how well the text resized and determine the breakpoints based on when the text became illegible.

This was the point at which we discovered that there were in fact a few requirements for the client’s hero images:

  • The images must use the brand’s chosen typeface.
  • The typeface could not be smaller than 18pt.

All of the images must follow these rules. So we set out to find out how well the typeface resized.

We started by creating a canvas in Photoshop that matched the largest size that the hero images would ever be used at. We filled that canvas with the chosen typeface in various sizes and weights.

Below is an example of what that canvas would have looked like if the typeface was Myriad and brand color was black.

Myriad Type Sample at 1080x432

After we saved the image as a PNG, we opened it in Chrome and started resizing it until the text was unreadable.

We determined that the 18pt italics weight became unreadable at around 774 pixels. So we created a new image that started at that size and repeated the experiment.

Animated gif showing resizing of image with type samples

The new image could span from 780 to 540 pixels wide before it became unreadable. So we then made a third image that started at 540 pixels wide. The third image worked at our smallest supported size, 320 pixels, so we stopped there.

Adjusting for ease of implementation

Once we knew where the type was no longer readable, we made some minor adjustments. We changed the image breakpoints from the arbitrary measurements that we had received in our experiment to numbers that were more easily divisible, and where possible, matched our grid.

So instead of using 774 pixels as the point as which we should switch from the 1080 image to a different one, we decided on 780 pixels.

We then took several of the existing hero images and attempted to make smaller versions of them using the new image sizes. We found, similar to the CB2 example above, that we needed to adjust the aspect ratio of the hero images in order to give us more vertical real estate on small screens.

After we had completed all of our tweaks and had new sizes for the responsive versions of the hero image that we thought would work, we used our type image resizing technique to verify that the typeface would hold up for the range of that we were going to recommend.

Type-based guidelines for responsive hero images

When we had completed our research, we had a simple set of guidelines that we could give to the designers responsible for the hero images.

Image Breakpoints
Name Width Height Max Width Min Width
Large 1080 360 n/a 781
Medium 780 320 780 541
Small 540 270 540 n/a

So long as the designers didn’t use anything smaller than 18pt and continued to only use the typeface that the brand specified, then the three sizes of hero images that we specified would work.

I know it seems suspicious that we ended up with small, medium and large images when so much of our industry is focused on mobile, tablet and desktop.

But we didn’t pick three image sources ahead of time. We let the type tell us how many breakpoints were needed.

In fact, we did a test and found that if the client wanted to use 16pt in their typeface of choice, that it would have required four breakpoints. And if they change fonts, a new experiment would be needed.

Start with an audit and let content be your guide

This system worked for one client on one project. It may not work for your project.

But whatever you do, it is a reminder that finding a solution starts with a responsive images audit. And whenever possible, we should let the content dictate how our responsive design will respond.