Product Email

Images

Foreground Images

All email clients can display .png, .gif, and .jpg images displayed with the <img> tag. .svg images are not well supported, regardless of how they’re referenced, so avoid using these.

Most images should be coded responsive by default, meaning they’ll scale down proportionately in small viewports. It’s safest to code all images this way, even if they don’t end up scaling in practice. However if we’re confident that an image will never scale, we can display a non-responsive image using less code.

Foreground Image Attributes

Name Type Notes
src attribute Always set and use full https:// reference.
width attribute Always set to intended desktop width.
height attribute Optional. Use only for images that won’t scale.
border attribute Always set to 0 to avoid blue outlines on image links.
alt attribute Always include but can be left empty if image is ornamental (Eg. alt="").
width inline CSS [Responsive] Always set to 100% for responsive images. Optional for static images.
max-width inline CSS [Responsive] Always set to intended desktop width. Optional for static images.
height inline CSS [Responsive] Always set to auto for responsive images. Optional for static images.
display inline CSS Generally good practice to use `display:block;` when possible since it negates a few pixels of unwanted space below images in some clients.
.g-img class Advisable for images larger than ~300px wide. Prevents gmail from displaying an image download icon over images.

Foreground Image Examples

1
2
3
4
5
/* Responsive */
<img src="https://placehold.it/1280x600" width="640" height="" alt="alt_text" border="0" style="width: 100%; max-width: 640px; height: auto; display: block;" class="g-img">

/* Static */
<img src="https://placehold.it/256" width="128" height="128" alt="alt_text" border="0" style="display: block;">
alt_text
alt_text

Background Images

Background images allow us to place additional HTML content on top of them, one of the few reliable ways to provide layering possibilities in email. A benefit of using background images over foreground images is, when paired with a background color, the HTML content on top of the background image remains accessible even when images are disabled.

Background images can be complicated to implement in email, as many properties need to be defined once in CSS and again in VML for Windows Outlook and Win10 Mail.

Background Image Attributes

Name Type Notes
background-image inline CSS Always set and use full https:// reference.
background-position inline CSS Optional to set the size of the image.
background-size inline CSS Optional to set the position of the image.
background-color inline CSS Always set to make foreground HTML legible if background image doesn’t load.
width VML in <v:rect> Always set to full container width. VML doesn’t account for padding, adjust as necessary.
height VML in <v:rect> Always set to full container height. VML doesn’t account for padding, adjust as necessary.
src VML in <v:fill> Always set and use full https:// reference.
color (background color) VML in <v:fill> Always set to make foreground HTML legible if background image doesn’t load.

Background Image Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<td valign="middle" style="background-image: url('https://d2axdqolvqmdvx.cloudfront.net/857c3f94-f791-401e-85a8-e041ec72569e/bgheropatternblue.png'); background-position: center center; background-size: cover; background-color: #117FF1; text-align: center;">
    <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:680px;height:220px;">
    <v:fill type="tile" src="https://d2axdqolvqmdvx.cloudfront.net/857c3f94-f791-401e-85a8-e041ec72569e/bgheropatternblue.png" color="#117FF1"/>
    <v:textbox inset="0,0,0,0">
    <![endif]-->
    <div>
        <!-- Foreground Content : BEGIN -->
        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation">
            <tr>
                <td style="padding: 60px; color: #ffffff; font-family: arial, sans-serif; font-size: 15px; text-align: center;">
                    Foreground HTML content.
                </td>
            </tr>
        </table>
        <!-- Foreground Content : END -->
    </div>
    <!--[if gte mso 9]>
    </v:textbox>
    </v:rect>
    <![endif]-->
</td>
Foreground HTML content.
Note: Windows Outlook and Win10 Mail cannot scale background images, so the image referenced in VML should be prepared @1x. Most other email clients can scale background images defined in CSS, so using @2x images is advisable.