Cloud Four Blog

Technical notes, War stories and anecdotes

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.

Responsive Images Audits

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

  • Are the images resolution switching or art direction?

    Knowing which use case you’re solving for will help determine which syntax makes the most sense.

  • Can we use SVG?

    If the images will work well as vector, then we may be able to use a single image source.

  • Are there representative images we can use to find sensible jumps in file sizes for our image breakpoints?

    Picking responsive image breakpoints remains a tough problem. It can be easier if all the imagery we’re using are things we control and have a distinct style.

    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.

    If we determine there is a good reason to do this for a set of images, then that will mean we want to use the <picture> element even if we aren’t doing art direction.

Sample responsive images audit results

We conducted a responsive images audit for a large site. The end result was a spreadsheet that looked like the table below.

Image Description Format Size Markup Notes
Property logos PNG8 (future SVG) Regular, Retina <img> Little variance between the wide and small screen image sizes.
Partner logos PNG8 (future SVG) Regular, Retina <img> Little variance between the wide and small screen image sizes.
Iconography SVG <img>
Brand logos PNG8 (future SVG) regular, Retina <img> Assumes little variance between the wide and small screen image sizes.
Property photography JPG 
(conditional WebP) Dynamically resized and compressed Non-art-direction <picture> Templates specify breakpoints.
Promo images w/ text 
(art direction) TBD <picture> Content producer defines images and breakpoints in CMS.

We did this audit a couple of years so we might have different answers today than we did then.

Also, it is worth noting that the property photography represented over ninety percent of the images on the site. We have found this to be common on the sites we’ve worked with.

Combine the audit with image services

Once you have your audit complete, you need to combine it with image resizing and processing services so you know how you will implement what your audit recommended. For more on that, check out:

When to use <picture> for resolution switching

I wrote recently about why you shouldn’t use <picture> for responsive images most of the time.

In short, my argument is that most responsive images fall under the resolution switching use case and that <picture> is best used for art direction.

There is one resolution switching use case where <picture> makes sense—when you want to provide different file formats using the type attribute.

If that is the case, then you should use <picture> without the media attribute.

Most of the syntax examples for <picture> include the media attribute, but it isn’t required. You can do something like:

<picture>
   <source type="image/svg+xml" srcset="logo.svg" />
   <source type="image/webp" srcset="logo.webp" />
   <source type="image/png" srcset="logo.png" />
   <img src="logo.gif" alt="Company logo" />
</picture>

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.

(Thanks to Kevin Lozandier for reminding me that I need to write this up, and to Brett Jankford and Wesley Smits for raising this point in the comments on my previous article.)

Image Resizing Services

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.

I’ve pulled together a spreadsheet of the image resizing services to make it easy for people to explore their options.

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.

Detection comes in two forms. One is using the user agent string to look up information in a device database. The other uses JavaScript to either find the same information or find the exact size of the image element in the page.

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.

Anything missing?

So take a look at the list of image resizing services. If you see something that is missing, please let me know.

I hope you find this useful.

Two pretty-good techniques for styling tricky form elements

Confession time: For most of my career, I despised form elements. Checkboxes, radios, selects and file inputs seemed to gleefully defy what little control I expected from an HTML element. Their penchant for idiosyncracy drove me to almost as much hair-pulling and teeth-gnashing as IE6 or web-safe fonts.

These days, my frustration with form elements has quieted. Partly that’s because browsers and development tools are so much better. But more significantly, I now understand the benefits of surrendering some control to the operating system. As devices continue to accept a greater and greater variety of input methods (keyboard, mouse, touch, voice, gesture, remote, etc.) while browsers adopt an astounding variety of new input types , it’s a gift for vendors to provide default experiences consistent with the user’s expectations of the platform.

So I no longer strive for “pixel perfection” when styling form elements. I don’t need absolute control. All I want is something easy to tap that feels intentional.

When the browser defaults don’t get me there, here are my go-to workarounds.

Checkboxes and Radios: Styled Sibling

This technique works in any browser that supports CSS3 selectors (basically IE9+). If you read Radio-Controlled Web Design a few weeks ago, this should feel familiar. Let’s start with a checkbox example.

We’ll need a few HTML elements:

  • The <input> itself.
  • A dummy element to style (right next to the <input>).
  • A containing <label> that passes click events to the aforementioned <input>.

I like to wrap the <input> and dummy elements in a container to keep everything nice and tidy, but strictly speaking it isn’t required. Here’s what that markup might look like:

<label>
  <span class="checkbox">
    <input type="checkbox">
    <span class="checkbox-value" aria-hidden="true"></span>
  </span>
  Set phasers to stun
</label>

We’re now free to visually hide the checkbox, styling .checkbox-value however we like:

/* hide the "real" checkbox visually */
.checkbox input {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
 
/* style the "fake" checkbox */
.checkbox-value {
  /* default/unchecked styles */
}
input:checked + .checkbox-value {
  /* checked styles */
}

When the user clicks the label, the click is passed along to the <input>, which toggles the state of :checked, which affects the appearance of .checkbox-value.

Here’s an example that styles the checkbox like an iOS-style switch:

See the Pen Styled checkbox by Tyler Sticka (@tylersticka) on CodePen.

Here’s the same idea applied to radio buttons with a slightly more conventional design (incorporating a base64-encoded SVG checkmark):

See the Pen Styled radios by Tyler Sticka (@tylersticka) on CodePen.

This technique has a few drawbacks. It requires some extra markup. It won’t work in IE8 or earlier without a fallback. It could probably use another pass for accessibility. But compared to most of the JavaScript solutions I’ve tried, this feels straightforward, consistent and predictable.

Selects and File Inputs: Transparent Overlay + JavaScript

For more complex elements like <select> and <input type="file">, we can’t get by on CSS alone (though it gets us further than one might expect).

Our markup is similar to the previous set of checkbox/radio examples, except we won’t need a <label> for click events:

<div class="select">
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <span class="select-value" aria-hidden="true"></span>
</div>

Instead of hiding the <select> entirely, we want to position it over the rest of our element, allowing it to intercept click events and correctly position any dropdown it may display. Because this technique relies on JavaScript, we’ll qualify some of our selectors with .js (since you’re probably already using Modernizr).

.js .select {
  position: relative;
  /* default styles */
}
.js .select:hover {
  /* hover styles */
}
.js .select.focus {
  /* focus styles */
}
 
/* nicer default styles for "real" <select> */
.select select {
  cursor: pointer;
  display: block;
  width: 100%;
}
/* hide and overlay when JavaScript is enabled */
.js .select select {
  left: 0;
  height: 100%;
  min-height: 100%;
  min-width: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
}

Already, this “works.” Options will display on click. But there are some problems. The value doesn’t update. There are no hover or focus styles. That’s where JavaScript comes in!

(Although I’ve chosen to write this in jQuery for the sake of readability, remember: You Might Not Need jQuery!)

// For each .select element
$('.select').each(function(){
  // Save some elements as variables
  var $element = $(this);
  var $select = $element.find('select');
  var $value = $element.find('.select-value');
  // Bind event handlers to <select>
  $select.on({
    // On change or keyup, update the value text
    'change keyup': function () {
      $value.text($select.val());
    },
    // On focus, add the focus class
    'focus': function () {
      $element.addClass('focus');
    },
    // On blur, remove the focus class
    'blur': function () {
      $element.removeClass('focus');
    }
  });
  // Trigger the change event so the value
  // is current
  $select.trigger('change');
});

Here’s how all of that comes together:

See the Pen Styled select by Tyler Sticka (@tylersticka) on CodePen.

With some tweaks, the same basic technique can also work for file inputs (assuming experimental WebKit/Blink features aren’t your thing):

See the Pen Styled file input by Tyler Sticka (@tylersticka) on CodePen.

This idea isn’t new. Peter-Paul Koch wrote about it quite a while back. Yet I rarely see it in use outside of a few large mobile frameworks. I’m honestly not sure why.

…and beyond?

What do all of these examples have in common? They don’t mess with the form element too much! By worrying less about customizing behavior and more on simply triggering it, we can indulge some of our designerly impulses without discarding all a given platform has to offer.

Consistency and functionality… no hair-pulling or teeth-gnashing required!

Update: September 8, 2014

A reader pointed out that the select example wasn’t responding to keyboard input in Firefox. I discovered that Firefox doesn’t fire the change event for selects like other browsers do, so I’ve updated the demo and example code so that it binds to both change and keyup.

I also learned that Firefox doesn’t show the full dropdown on any keypress, but this seems to be true of unstyled <select> elements as well. I encourage developers to use these examples as a starting point, and to augment usability shortcomings on a case-by-case basis if the default browser behavior isn’t cutting it.