How to show or hide images on desktop and mobile in email newsletters

Today I will show you how to code email newsletters serving different images on desktop and mobile devices. I have had issues in the past when hidden images would show in Outlook Web App but lately it looks like this issue has been solved. Thank you Microsoft.

Let's assume we have 2 images, one to show on desktop and another on mobile. I usually try to avoid this in emails but every now and then some clients might ask for something like this, so we need to be prepared.

For the purpose of this article I will use one table with 2 table cells each containing the image we want to show, something like this:

<table>
  <tr>
    <td style="border-collapse: collapse;"><img src="http://emailsnob.com/bl-content/uploads/pages/9c6ae12aa7882059585d36d0cf5f3ac1/Desktop_image.png" width="600"></td>
  </tr>
  <tr>
    <td><img src="http://emailsnob.com/bl-content/uploads/pages/9c6ae12aa7882059585d36d0cf5f3ac1/Mobile_image.png" width="600"></td>
  </tr>
</table>

Let's add some style and some classes we will be using to toggle the show and hide for desktop and mobile.

<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:600px;" width="600" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr class="desktop">
    <td style="border-collapse: collapse;"><img src="http://emailsnob.com/bl-content/uploads/pages/9c6ae12aa7882059585d36d0cf5f3ac1/Desktop_image.png" width="600" style="display: block" alt="this is the desktop image"></td>
  </tr>
  <tr class="mobile" style="display: none; mso-hide: all; width: 0; max-width: 0; font-size: 0;">
    <td><img src="http://emailsnob.com/bl-content/uploads/pages/9c6ae12aa7882059585d36d0cf5f3ac1/Mobile_image.png" width="600" style="display: none; mso-hide: all; width:100%; max-width: 600px;" alt="this is the mobile image" class="mobile" ></td>
  </tr>
</table>

style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" it's the standard style I use on tables to avoid unwanted spacing or/and borders in Outlook. Anyway the real magic comes in place when adding the style and the classes for mobile and desktop. 

While hiding stuff on mobile is quite simple, for desktop could be not as straight forward. To hide on mobile, you could simply use a class with display:none !important e.g. .desktop {display: none !important;}.

But to hide on desktop, beside the class we also need some style applied directly on the image itself. Try removing the CSS in the head and you will see the email won't work as intended. That's because some email clients ignore the inline style, while others are rendering solely based on it.

You will see, I put the classes on the TR instead of the TD because when using on TDs you might end up with some weird spacing when the table cells are hidden.

The key to hide parts of emails on desktop is adding  style="display: none; mso-hide: all; width: 0; max-width: 0; font-size: 0;" on the TR and also display: none; mso-hide: all; on the image itself. It won't work if you're doing it in only one place. Try it to convince yourself.

Alright let's put it all together so you can also test on your own. Just bear in mind, things are changing in email marketing so what works now might not work later. So, again, always test.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
   xmlns:o="urn:schemas-microsoft-com:office:office" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Display different images on desktop and mobile</title>
<!--[if gte mso 9]>
        <xml>
          <o:OfficeDocumentSettings>
            <o:AllowPNG />
            <o:PixelsPerInch>96</o:PixelsPerInch>
          </o:OfficeDocumentSettings>
        </xml>
<![endif]-->
<style type="text/css">
@media only screen and (max-width: 599px) {
.desktop {
    display: none !important;
}
.mobile {
    display: inline-block !important;
    width: 100% !important;
    max-width: 600px !important;
}
}
</style>
</head>
<body style="padding:0; margin:0">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:600px;" width="600" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr class="desktop">
    <td style="border-collapse: collapse;"><img src="http://emailsnob.com/bl-content/uploads/pages/9c6ae12aa7882059585d36d0cf5f3ac1/Desktop_image.png" width="600" style="display: block" alt="this is the desktop image"></td>
  </tr>
  <tr class="mobile" style="display: none; mso-hide: all; width: 0; max-width: 0; font-size: 0;">
    <td><img src="http://emailsnob.com/bl-content/uploads/pages/9c6ae12aa7882059585d36d0cf5f3ac1/Mobile_image.png" width="600" style="display: none; mso-hide: all; width:100%; max-width: 600px;" alt="this is the mobile image" class="mobile" ></td>
  </tr>
</table>
</body>
</html>

This is a barebone code example. It has everything you need without the fluff. Use it as it is or experiment on your own. I like simple code but you can go as complex as you want, now that you have a solid foundation. I tested it in Email on Acid and it works perfectly everywhere. 

Cheers for now and happy email newsletters coding! Till next time, all the best from your friend, the email snob.