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 this example:
Mobile layout A shows the desktop image simply scaled down to fit the smaller screen. It’s only just legible, 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!). 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 (the mobile version) 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.
- 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.
- 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>
- 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):
- 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">
- And then these two VML snippets (bolded below) 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 as well as the heights and widths 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]><!-- -->
/*html for houdini start*/
<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