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.

/* Responsive */
<img src="https://fakeimg.pl/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://fakeimg.pl/256" width="128" height="128" alt="alt_text" border="0" style="display: block;">

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.

<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: #fff; 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>

Email has largely standardized on PNG, JPG, and GIF file formats. Animated GIFs are supported in all email clients, though Windows Outlook and Win10 Mail only display its first frame.

SVG is not well supported in most web email clients, including Gmail (which accounts for most of our email opens) and are completely blocked in Outlook. This includes base64 encoded images.

• Foreground images should be saved at @2x since they scale reliably in all major email clients. @2x images display crisply on high-definition displays when scaled down to @1x in code.
• Background images should be saved at @1x since they don’t scale reliably in all major email clients.

Ideally, images should be under ~100KB. Tools like Image Optim, Krackin, and TinyPNG help bring down a file size. Keep in mind that animated GIFs tend to get very large, so it’s a good idea to keep them simple and use them sparingly.

Images should be hosted within their respective ESP. Upload images in Iterable for Iterable emails, add images in GitHub for StackMail emails, etc. Images should not be referenced using services like Imgur or Dropbox, as they have a greater chance of being marked as spam.

Animated GIFs can help explain an interaction or add a bit of delight that isn’t possible with static email designs. However there are a couple things to consider when designing and preparing animated GIFs.

1. Support: Every email client displays animated GIFs, but some don't animate them. Windows Outlook shows only the first frame, so it's important that all vital information is included in the first frame of the GIF.
2. File size: Animated GIFs are prone to excessive file sizes. The rule of thumb is to try to keep animated GIFs under ~1MB. However, it's OK to include a good-looking animated GIF with a large file size provided the rest of the email is relatively small.