How to swap images for responsive emails

Oct 12, 2020 | Code snippets, Email production

"If you’ve ever wanted to show a different image on your mobile device than on a desktop client, this tutorial is for you!..."

Why would you want to swap an image on a responsive email?

  • When the desktop image is resized on mobile (scaled down to fit the smaller screen), the text isn’t readable.
  • The layout of the image doesn’t lend itself to mobile.

Have a look at the below example:

Mobile layout A shows the desktop image simply scaled down to fit the smaller screen. It’s still readable, but it loses impact.

Mobile layout B shows the mobile version of the hero image which was designed specifically for a smaller screen.

Best practice when swapping images on emails

  • We wouldn’t recommend swapping more than one image in your email. It can make your file size bigger (both code and images). In our experience, 95% of the image swaps we do are for the first image above the fold, and the rest of the email is designed carefully with mobile in mind.
  • Keep your image files sizes down and try using an image compression tool like TinyPNG (works for JPGs too!) once you’ve finalised the design. We love Tiny PNG: https://tinypng.com/.
  • Make sure the server you’re hosting your mobile image on is reliable and that content loads quickly. The mobile image could be hosted on your ESP, if allowed.

Let’s get started

This “image swap” technique is achieved by using media queries. The setup is quite simple: Wrap an image in a span element. Hide that image on mobile and show a background image within the span element instead. The media queries are used to hide the desktop image and set the height, width and path for the mobile image.

 

  1. Firstly, create your media query and place it in the header section of your html (below the title and meta tags)
<style type="text/css">
@media only screen and (max-width: 639px) {
    /* For smaller screens */
    #switcher {
    /* Code to show mobile image as a background image */
        display:block;
        background-image:url(https://imageserverurl/mobileimage.jpg) !Important;
        background-repeat: no-repeat !Important;
        background-position: center !Important;
        background-size:100%!important;
        background-size:cover!important;
        width: 320px !Important;
        height: 400px !Important;
}
       /* Code to hide the desktop image on smaller screens devices */
       #houdini {display: none !Important;}
}
        /* Fallback code for unsupported platforms - just resize the hero image*/
        
.image320 {width:320px !important; height:auto !important; }
</style>

  • background-image:url
    Your mobile image must be hosted on a server. Input the url to the image here.
  • Width
    Our responsive emails are 320px wide on mobile devices – adjust accordingly.
  • Height
    This is the height of your mobile image – it varies for each design.
  • .image320
    Although we’ve found the image swap to be well supported, there are a few devices that won’t hide your desktop image. It’s important to add an additional class here to resize the desktop image, should this be the case. If you don’t do this, the entire email will be out of whack on a smaller screen.
  1. Set the desktop image in the body using a span element in the body part of your html. Add the class and ID specified in the styles section
<span id="switcher">
        /*switcher code sets the background image, height and width for the span element */
        <img id="houdini" src="desktopimage.jpg"   class="image320" />
        /*houdini code hides the image so we see the background image*/
</ span>

  1. Save and test!

But what about hyperlinked images?

The caveat is that if you had a hyperlink on your desktop image, it will no longer be available on mobile because the image is hidden. A simple workaround would be to wrap the span element in an <a> tag: 

<a href="https://mylink.html">
  <span id="switcher">
   <img id="houdini" src="desktopimage.jpg"   class="image320" />
  </ span>
</a>

However, this isn’t supported in MS Outlook and the link disappears, so to rectify this and have a clickable link in Outlook, we’ll add a bit of VML (Vector Markup Language):

 

  1. Firstly, make sure the following namespace definitions are added to your html.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

  1.  And then these two snippets go above and below your image swap code in the body. Remember to adjust the code accordingly by adding the url and desktop image name and path within the VML code:
<!--[if gte mso 9]>
<td> 
  <a href=”https://mylink.html”>
   <img style="display: block;" border="0" src="desktopimage.jpg" alt="Add alt text here" width="xxx" height="xxx" class="image320" />
  </a> 
 </td> 
<![endif]-->

<!--[if !gte mso 9]><!-- --> 
<td> 
  <a href=”https://mylink.html”>
   <span id="switcher"> 
    <img id="houdini" style="display: block;" border="0" src="desktopimage.jpg" alt="Add alt text here" width="xxx" height="xxx" class="image320" />
   </span>
  </a>
</td>
<!--<![endif]-->

And that’s it.

Happy image swapping!

Email services designed just for you

When you partner with us, you’ll have access to a dedicated team of email marketing experts, including strategists, campaign managers, designers and developers. We offer once-off services and retainer-based service plans.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Recommended reading

Email templates vs email builders

We do the comparisons to bring you the best email template creation options. Template builder vs ready-made email template vs custom-made email template. Which one is best?

Email newsletter template design

Maybe you’ve been tasked with producing your company’s email newsletter or maybe you’ve been doing newsletters for a while and want to compare notes. Either way, if you’d like to know how an email newsletter template is planned and designed then our latest article is for you!

How to create the perfect email newsletter template

The Cantaloupe Story

Read about us and meet our team

Join our team. Work from anywhere

Help us make email marketing better

Helping marketing teams and agencies since 2006

Overview of email marketing. Learn more

Email templates

Tried and tested templates
PSD to HTML
Custom designs

Managed service

Data work
Production
Campaign Management

Automation

Automate marketing processes & tasks
Lead nurturing

Pin It on Pinterest

Share This