Responsive Images

The following techniques should be done by a person familiar with basic HTML and CSS markup.

To have a different image for mobile resolution.
The markup structure would look like this :

The general idea is to always show the desktop image and then wrap mobile image with DIV tag, that has "display: none;" defined in @style attribute and if an email client supports it, you will show a different image on mobile resolution.

Important: you have to wrap mobile image with DIV, otherwise just hiding image doesn't work in some versions of Outlook or other less advanced mail clients and as a result, users will see both mobile and desktop images.

Full snippet would look like this:

<html>
<head>
<style type="text/css">
@media screen and (max-width: 599px), screen and (max-device-width: 599px) {
.img-mobile-div,
.img-mobile {
display: block !important;
max-height: none !important;
max-width: none !important;
line-height: 1.5 !important;
width: 100% !important;
height: auto !important;
}
.hide-mobile {
display: none !important;
width: 0px !important;
height: 0px !important;
overflow: hidden !important;
line-height: 0 !important;
font-size: 0 !important;
}
}
</style>
</head>
<body>
...
<img src="DESKTOP-IMAGE-SOURCE" alt="Desktop" width="600" height="300" border="0" style="display: block; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;" class="hide-mobile"/>
<div style="display: none; font-size: 0; line-height: 0; mso-hide: all; max-height: 0; max-width: 0; width: 0;" class="img-mobile-div">
<img src="MOBILE-IMAGE-SOURCE" alt="Mobile" style="display: none; font-size: 0; line-height: 0; mso-hide: all; max-height: 0; max-width: 0; width: 0; -ms-interpolation-mode: bicubic;" class="img-mobile"/>
</div>
...
</body>
</html>

Please note that mailer clients require additional attributes and properties in comparison to classic browser markup.

<style>...</style> is inside of <head></head> tag and image will be somewhere inside of your mailer content inside of <body></body> tag.
Update @src attributes with real path to images;
Update @width and @height attributes with real width and height of images.
@media query. In a browser it's enough to define @media (max-width: 599px) {... . Here you should write it down as @media screen and (max-width: 599px), screen and (max-device-width: 599px) {...
check embedded styles that normally you would not include into CSS, but you have to add it here to have your code compatible between browsers. For example style="display: none; font-size: 0; line-height: 0; mso-hide: all; max-height: 0; max-width: 0; width: 0;"
check "special" style attributes, like mso-hide: all; (for hiding mobile content in Outlook) or -ms-interpolation-mode: bicubic; for setting complex interpolation algorithm to make higher quality large images by processing small ones.
always use "!important" in your CSS to overwrite embeded styles.

Centering small images

The code above works fine when you need to stretch the mobile image in the table.

But if you are replacing the logo on mobile (for example, replacing a white logo with a black one), your code will look like this:

<html>
<head>
  <style type="text/css">
@media screen and (max-width: 599px), screen and (max-device-width: 599px) {
.mobile-logo-div,
.mobile-logo {
display: block !important;
max-height: none !important;
max-width: none !important;
line-height: 1.5 !important;
height: auto !important;
text-align: center !important;
}
.mobile-logo-div {
width: 100% !important;
}
.mobile-logo {
width: auto !important;
display: inline !important;
}
.hide-mobile-logo {
display: none !important;
width: 0px !important;
height: 0px !important;
overflow: hidden !important;
line-height: 0 !important;
font-size: 0 !important;
}
}
</style>
</head>
<body>
...
<a href="#" style="text-decoration: none; border: 0 none;" target="_blank">
<img alt="Olympus Logo" border="0" class="hide-mobile-logo" width="232" height="43" src="DESKTOP-LOGO-SOURCE" style="display: inline; border: 0 none; margin: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;"/>
  </a>
<div class="mobile-logo-div" style="display: none; font-size: 0; line-height: 0; mso-hide: all; max-height: 0; max-width: 0; width: 0;">
<a href="#" style="text-decoration: none; border: 0 none;" target="_blank">
  <img alt="Mobile Logo" border="0" class="mobile-logo" width="232" height="43" src="MOBILE-LOGO-SOURCE" style="display: none; font-size: 0; line-height: 0; mso-hide: all; max-height: 0; max-width: 0; width: 0; -ms-interpolation-mode: bicubic;"/>
  </a>
</div>
...
</body>
</html>

Hiding Background Image on Mobile Resolution

Sometimes you will want to have your text over image and then hide it on mobile resolution. You can use CSS background-image property combined with @background attribute to define source of the image.

Layout can look like this:

<html>
<head>
<style type="text/css">
@media screen and (max-width: 599px), screen and (max-device-width: 599px) {
.mobile-hide-bg-img {
background-image: none !important;
background-color: gray !important;
height: auto !important;
}
}
</style>
</head>
<body>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td height="181" bgcolor="#f2f2f2" background="BACKGROUND-IMAGE-SOURCE" class="mobile-hide-bg-img" style="background-image: url(BACKGROUND-IMAGE-SOURCE); background-repeat: no-repeat; backgroundp-position: center top; line-height: 0em; background-color: #f2f2f2;" align="center" valign="top">
<h2>Some Text comes here</h2>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Please make sure that:

you are using both @background attribute and CSS background-image properly for better cross mail client compatibility.
Please realize that background image will never appear on some mail clients, like "Outlook" or "Windows 10 Mail", so you should use @bgcolor attribute and CSS background-color property to define some light color if your text is dark or some dark color when your text is light.
Add class for hiding background on mobiles (if needed) and then use CSS to hide it.
In most cases you will want to set the height of a cell because the background image doesn't make a cell's content fit the image size and if you are hiding background image on mobile you should reset this height;
If you are changing the background from light to dark (or reverse), don't forget to change styles for the text in CSS.

Please send us suggestions regarding this documentation page
If you would like to recommend improvements to this page, please leave a suggestion for the documentation team.