Placeholder Images for Email Template Development

Published March 11, 2026

Email templates are notoriously difficult to test. Different clients render images at different sizes, some block external images by default, and broken image URLs leave ugly alt-text boxes in the layout. Placeholder images that are correctly sized and self-hosted eliminate these variables during development, letting you focus on the layout and copy.

Common image sizes in email templates

Most email templates use a fixed-width layout between 550 and 600 pixels. Within that constraint, common image slots include:

- **Header logo**: 200×50 or 300×60 - **Hero image**: 600×300 or 600×400 - **Product card**: 280×280 or 260×260 - **CTA banner**: 600×100 - **Footer logo**: 120×40

Enter these sizes into PlacePack with descriptive labels to generate a complete fixture set for your email template.

Why self-hosted placeholders matter for email testing

Email clients like Outlook, Gmail, and Apple Mail handle external images differently. Some block them by default, showing a broken icon or alt text. Others proxy the image through their own servers, which can fail or add latency.

During development, you want to see the layout with images present. Using self-hosted placeholder files — served from your local dev server or embedded as base64 — guarantees that the images appear regardless of email client settings. This is especially important when testing in tools like Litmus or Email on Acid.

Generating a placeholder pack for email

Open PlacePack and enter the sizes from your email template. Use a consistent color scheme that matches your brand — this makes the template look intentional even with placeholders. Add labels like `hero`, `product`, `logo` so the downloaded filenames are self-documenting.

Download the ZIP and extract into your email project's asset directory. Reference the files in your template HTML using relative paths for development and absolute URLs for test sends.

<table width="600" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <img src="images/hero_600x300.png" width="600" height="300" alt="Hero image" />
    </td>
  </tr>
  <tr>
    <td>
      <img src="images/product_280x280.png" width="280" height="280" alt="Product" />
    </td>
  </tr>
</table>

Testing across email clients

Once your template uses placeholder images, test it across clients using Litmus, Email on Acid, or manual client testing. The placeholder images will render consistently, so you can focus on layout issues like table alignment, padding, and responsive stacking.

When the real assets are ready, swap the placeholder filenames for the production image URLs. Because the dimensions match exactly, the layout won't shift.

Retina considerations for Apple Mail and iOS

Apple Mail and iOS Mail render images at retina resolution. To avoid blurry images on these clients, generate @2x variants in PlacePack. Serve the @2x image in the HTML but set the display width and height to the 1x dimensions. This gives Apple devices sharp images while maintaining the correct layout size on other clients.

FAQ — Frequently asked questions

Should I use PNG or SVG for email placeholders?

Use PNG. SVG support in email clients is inconsistent — Outlook does not render inline SVG, and many clients strip SVG from img tags. PNG is universally supported.

Can I embed placeholder images as base64 in email HTML?

You can for testing, but most email clients have a size limit for base64-encoded images. For production, host images on a CDN and reference them by URL.

What's the maximum email image width I should use?

Most email templates use a 600px maximum width. Generate hero and banner images at 600px wide. For retina, generate at 1200px wide and display at 600px.

Related guides

• Placeholder Images for Figma Mockups and Prototypes →
• Placeholder Images for Notion Pages and Embeds →