Sections

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.

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.

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.