Responsive Email Design

Chapter 6

Optimizing images for mobile

The limited amount of screen real estate available on mobile viewports means that images should be added thoughtfully to HTML email. However, solid CSS support in clients like iPhone Mail has meant that there are a number of ways you can be clever about their use.

In this chapter, we'll look at some techniques that take advantage of supported CSS properties like background-image. These techniques will not only allow you to display mobile-optimized images throughout your designs, but ensure they look crisp at any width.

Using background images for better headers

We usually run a mile before recommending that anyone use background images in their email newsletters, but in the case of iPhone and Android default Mail, we're talking about clients with pretty solid CSS support and all the benefits that media queries can bring. One of these benefits is being able to substitute images when an email campaign is viewed on a mobile device, by hiding the original and letting the beautiful, mobile-friendly image shine through.

Traditionally, we've recommended that images be resized as to fit within the viewport of mobile devices. However, the issue with resizing images in this way is that it can make any information therein too small to read or understand. A better option is to create a unique image specifically for mobile-toting subscribers. We'll do this by surrounding the image in a table cell or div, then creating a media query that hides the original and shows another header image as a background image instead:

CSS
@media only screen and (max-device-width: 480px) {
	td[class="headercell"] {
		background-image: url(images/header-325.png);
		width: 325px !important;
		height: 115px !important;
	}
	td[class="headercell"] img { 
		display: none; 
	}
}
HTML
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td class="headercell">
		<img src="images/header.png" border="0" width="600" />
	</td>
   </tr>
</table>

Here's how things look before and after the header images have been swapped out:

An advantage to using this technique is that you can shorten the length of emails by providing significantly shorter images (pictured). When it comes to mobile email, the shorter, the better.

Resizing images for fluid layouts

The issue with the background image swap method above is that it's only really effective with static-width email designs. These days, mobile devices can come in all sorts of shapes and sizes, therefore making fluid email layouts a popular option. While the obvious solution seems to be to set background-size: 100% in the earlier media query, as Elliot Jay Stocks points out, the better option is to use background-size: cover:

@media only screen and (max-device-width: 480px) {
	td[class="headercell"] {
		background-image: url(images/header-480.png) !important;
		background-size: cover;
		}
	td[class="headercell"] img { 
		display: none; 
		}
}

Thankfully, Webkit-powered email clients offer full support for background-size, which means it gets the all-clear in iOS and Android default mail. If in doubt, we recommend going the traditional route, which is to stick to using a regular <img> image in a fluid layout and resizing it like so:

@media only screen and (max-device-width: 480px) {
	td[class=headercell] img {
		height:auto !important;
		width:100% !important;
	}
}

Serving high-res images for Retina displays

Our final tip is in regards to getting images to display as sharply as possible on Apple's Retina displays. This is one that we've covered before, but given that these displays aren't going away anytime soon, it's worth a recap.

The trick is to create key images at twice the size you actually plan on displaying them, thus making the image look super crisp on iPhone 4, 4S and iPad displays. For example, using our earlier background image hack, we'd create a header image that was really 650px x 230px (eg. header-325@2x.png), but then shrink it down for mobile screens. Here's how the media query would look:

@media only screen and (max-device-width: 480px) {
	td[class="headercell"] {
		background-image: url(images/header-650@2x.png) !important;
		background-size: 325px 115px;
		width: 325px !important;
		height: 115px !important;
		}
	td[class="headercell"] img { 
		display: none; 
		}
	}
}

If you specifically want to target Retina displays with a special stylesheet, you can use this CSS declaration instead:

@media all and (min-device-pixel-ratio : 1.5) { ... }

For more information on its usage, we recommend reading this post by Ben Frain.

While this header image will only be super-sharp on said displays, the issue at hand is that all media query -supporting email clients will be burdened with downloading the high-res image. Indeed, the drawback to using this technique is that bigger images will of course have bigger file sizes, resulting in longer email load times in the inbox. So use this technique sensibly, especially as not everyone is set to benefit from high-res images.

Optimizing your subscribe forms

Sign up for free.
Then send campaigns for as little as $9/month

Create an account