Images

Images can greatly enhance the visual appeal of an email and help convey your message more effectively. However, embedding images in HTML emails requires special attention to compatibility and reliability.

Example

See the Pen Image by Email Code Camp (@EmailCodeCamp) on CodePen.

HTML Images Syntax in Emails

The <img> tag is used to embed an image in an HTML email.

Unlike web pages, many email clients have limited CSS support and often block images by default until the user allows them. Therefore, using alt text and optimizing image loading is essential.

The <img> tag in emails must be simple, inline, and compatible across platforms.

Required Attributes

• src – Specifies the image URL (must be absolute and web-accessible).
• alt – Provides descriptive text for accessibility and when images are blocked.

Syntax:

<img src="https://yourdomain.com/image.jpg" alt="Descriptive text">

The alt Attribute

The alt attribute is crucial in email design:

• It appears when images are blocked.
• It provides context for screen readers.
• It boosts accessibility and usability.

Example:

<img src="https://example.com/promo.jpg" alt="20% Off All Items This Weekend!">

Sizing Images in Email

Use inline styles to define image size. Avoid using external CSS or <style> tags, as most email clients ignore them.

Example:

See the Pen Sizing Images in Email by Email Code Camp (@EmailCodeCamp) on CodePen.

• Always set a width in pixels.
• Use height:auto to maintain aspect ratio.

Common Gotchas in Email Images

• ✅ Use absolute URLs
• ✅ Host images on a reliable server
• ✅ Include alt text
• ✅ Use inline styles only
• ❌ Avoid JavaScript, external CSS, or image maps
• ❌ Don’t rely on background images (many clients block them)

Making Images Clickable

Wrap your <img> in an <a> tag to make it clickable.

Example:

See the Pen Clickable Image 2 by Email Code Camp (@EmailCodeCamp) on CodePen.

Responsive Email Images

Many modern email clients support basic media queries, but for wide compatibility:

• Use style="max-width: 100%; height: auto;" for responsive scaling
• Set width in pixels for legacy support

Example:

See the Pen Responsive Image by Email Code Camp (@EmailCodeCamp) on CodePen.

Recommended File Formats

Summary

Make images clickable with <a> if needed

Use <img> with absolute URLs and alt attributes

Use inline styles for width and height

Host images on reliable servers

Avoid unsupported formats like SVG or WebP