Placeholder Images for Email Templates: What Works Across Clients

Email Rendering Is Not the Web

Email clients do not render HTML like browsers. Outlook uses Word's rendering engine. Gmail strips <style> blocks. Yahoo has its own CSS quirks. This matters for placeholder images because the techniques that work on the web — inline SVG, data URIs, CSS backgrounds — often fail in email.

When designing email templates, placeholder images must follow the most constrained environment in your target client list.

What Does Not Work in Email

What Does Work

The only reliable approach for images in email is a standard <img> tag pointing to an externally hosted image file:

<img
  src="https://cdn.example.com/placeholder-600x300.jpg"
  width="600"
  height="300"
  alt="Product image placeholder"
  style="display:block; width:100%; max-width:600px; height:auto;"
/>

Key Attributes

• width and height: Explicit pixel dimensions prevent layout shift while images load — critical in email where slow connections are common
• style="display:block": Removes the unwanted gap below inline images in some clients
• style="width:100%; max-width:600px; height:auto": Enables responsive scaling while capping the maximum size
• alt text: Shows when images are blocked (default in many email clients)

Placeholder Image Sizes for Common Email Layouts

Always export at 2x resolution for retina displays. A 600px-wide hero should be saved as 1200px wide.

Alt Text as Fallback Content

Many email clients block images by default. The alt text becomes your content:

<!-- Bad: invisible when images blocked -->
<img src="https://cdn.example.com/hero.jpg" alt="Image" />

<!-- Good: communicates value without images -->
<img
  src="https://cdn.example.com/hero.jpg"
  alt="Summer Sale — 40% off allOutdoor Gear.Shop Now"
  style="display:block; width:100%; max-width:600px; height:auto; color:#1E293B; font-size:16px; font-family:Arial,sans-serif;"
/>

Inline color and font-size on the <img> tag style the alt text in clients that support styled alt text (most do, except Outlook).

Bulletproof Background Images

For background images behind text, use the "bulletproof background" technique — a VML fallback for Outlook wrapped in standard CSS for other clients:

<td background="https://cdn.example.com/placeholder-600x300.jpg" bgcolor="#E2E8F0" width="600" height="300" valign="top">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:300px;">
    <v:fill type="frame" src="https://cdn.example.com/placeholder-600x300.jpg" color="#E2E8F0"/>
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div style="padding:20px; font-family:Arial,sans-serif; color:#1E293B;">
    Your content here
  </div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>

When the background image fails to load (images blocked, CDN error), the bgcolor provides a solid fallback color.

Placeholder Services for Email Testing

External placeholder services work well for email testing since images must be externally hosted anyway:

Important: Never use placeholder services in production emails. They may go down, change content, or get blocked by email security filters. Replace all placeholders with final images before sending.

Dark Mode in Email

Dark mode email clients (Outlook.com, Apple Mail) may invert image colors, making light placeholders look awkward. Test with:

• Apple Mail (macOS/iOS): Respects prefers-color-scheme
• Outlook.com: Forces dark mode, may invert colors
• Gmail: Limited dark mode support

For placeholder images, choose neutral colors that work in both light and dark contexts. Avoid pure white (#FFFFFF) backgrounds inside images — they create harsh rectangles in dark mode.

Key Takeaways

• Only externally hosted <img> tags work reliably across all email clients
• Inline SVG, data URIs, and CSS backgrounds are not safe for email
• Always include explicit width, height, and descriptive alt text
• Export images at 2x for retina support
• Use bulletproof background techniques for image-behind-text layouts
• Replace placeholder services with final images before production sends
• Test images in both light and dark email modes

Try It Yourself

Generate placeholder images in the exact sizes needed for email templates using our Placeholder Image Generator. Choose custom dimensions and colors, then download production-ready files.

Related Guides

• Placeholder Image Guide — general best practices for dummy images
• Design Prototyping Tools — placeholder workflows from wireframe to production