Fluid, High Resolution Background Images in Email

Recently, in the Litmus Community, someone asked if high-resolution background images could be used with the Fluid-Hybrid responsive email technique.

The Fluid-Hybrid technique is popular because it doesn’t require media queries to make your email responsive. However, swapping in high-resolution images requires media queries. Fluid purists may desire to avoid media queries to ensure the widest possible compatibility across devices and clients. In my opinion, the best results can be achieved by combining these two techniques.

Here’s a video that demonstrates what it’ll look like:

When the available width falls below the email’s breakpoint, the 2x high resolution background image is swapped in.

For this tutorial, I’m building the email with Inkcite, the free, open-source workflow for building modern, responsive emails. Fluid-Hybrid layouts and image swapping are core features of the Inkcite framework — so its easy to implement in your next email.

You’ll need two versions of your background image — a normal one that will be displayed in the desktop version of your email along plus a high-resolution version that is 2x wide and at least 2x high. Because we’re using Fluid-Hybrid (which allows for variable-width and, as a result, variable-height layouts) having a tall, rectangular high-resolution image produces the best results.

I’m going to apply the background to a padded table containing some placeholder text. Here’s the simple, easy-to-read markup (this goes in your email’s source.html file) to achieve the results shown in the video:

{table width=300 padding=25 bgcolor=#b36338 background="non-retina.jpg" background-position="center" mobile-background="retina.jpg" mobile-background-size="fill" mobile="fluid"}
{td font-size=25 color=#fff align=center}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas tristique diam id pellentesque.
{/td}
{/table}
The most important markup is in the Table declaration. Here's a breakdown of that markup, attribute by attribute:
  • The width attribute is required for Fluid tables and establishes the maximum width for the table.
  • The padding attribute sets the cellpadding for all cells in the table.
  • A bgcolor should always be set for clients that don’t support background images.
  • The background attribute indicates the background image (non-retina.jpg) that will be displayed in desktop/lower resolution email clients.
  • The background-position attribute centers the background image horizontally and vertically within the bounds of the table.
  • The mobile-background attribute indicates mobile devices should display the high-resolution version (retina.jpg) instead.
  • The mobile-size attribute controls how the background is sized on mobile devices. By specifying fill the image will horizontally fill the available space. Since the image is larger than the available space, it will display crisply on high resolution devices.
  • Setting the mobile attribute to fluid tells the table to scale fluidly up to the specified width of the table.

It's that easy. Inkcite handles all of the complex HTML and CSS necessary to bring Fluid-Hybrid layouts (wrapping elements, conditional tables and inline styles and wrapping elements) and image swapping (media queries and CSS classes) together allowing you to focus on the design rather than rendering quirks.

If you're a Fluid-Hybrid purist, you could omit the mobile-attributes, add a background-size attribute and use the high-resolution image directly in both desktop and mobile versions of your email. That would avoid adding media queries to your email at the cost of making your desktop clients download the larger image unnecessarily.

Regardless of which solution you choose, be sure to enable Inkcite's automatic image optimization to compress the images in your email, ensuring your images download as quickly as possible.

Like what you read? Give Jeffrey Hoffman a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.