Placeholder Images for HTML Email Templates
- Email header images: 600px wide (2x for retina = 1200x200–400).
- Always include alt text — roughly 50% of email opens have images blocked.
- Use table-based layouts with inline background colors behind image cells as fallbacks.
- Test with images blocked before sending — your email should still communicate clearly.
Table of Contents
HTML email templates have different rules from web pages. Images frequently get blocked by email clients, click-through on broken images is nearly zero, and the layout must not fall apart when an image doesn't load. Using properly sized placeholder images during template development ensures your layout is correct before you drop in real photos — and forces you to write good alt text from the start.
Standard Email Image Sizes
| Image type | Recommended size | Notes |
|---|---|---|
| Email header / hero | 1200x400 (displayed at 600x200) | 2x for retina. Most email clients display max 600px wide. |
| Single column content image | 1200x800 (displayed at 600x400) | 3:2 aspect ratio. Scale down with max-width: 100%. |
| Two-column image | 600x400 (displayed at 280–300px) | Accounts for gutters in a 600px container. |
| Product thumbnail | 400x400 (displayed at 200x200) | Square product images in promotional emails. |
| Author / sender avatar | 200x200 | Circular crop is applied in template CSS. |
| Footer logo | 400x100 (displayed at 200x50) | 2x for retina. Keep under 50px display height. |
The 600px maximum width is a hard constraint in email design. Unlike web pages, email clients constrain layout widths. All placeholder images should be generated at 2x the display size for retina support.
Why Placeholder Images Matter in Email Templates
Developing an email template with placeholder images before adding real content lets you catch layout problems that only appear at specific image sizes:
- Aspect ratio mismatches — if the layout expects a 3:2 image but the content team provides a 1:1 photo, the layout breaks. Generating placeholders at the exact intended dimensions reveals this before launch.
- Alt text gaps — placeholder images force you to write alt text for every image slot during development, rather than adding it as an afterthought. Email clients that block images will display only the alt text.
- Fallback color testing — with images blocked, email clients show the background color of the table cell containing the image. Setting a brand-appropriate background color on image cells requires testing with placeholders visible and then hidden.
Building the Fallback Layer for Blocked Images
Approximately 40–60% of email opens occur with images blocked or not loading, depending on the audience. Your email must communicate clearly even when every image is gone.
The correct approach using placeholder images during development:
<table>
<tr>
<td bgcolor="#1A73E8" align="center">
<img src="header-1200x400.png"
width="600" height="200"
alt="Summer Sale — 30% Off All Orders"
style="display:block; border:0;">
</td>
</tr>
</table>The bgcolor on the table cell shows a brand blue when the image is blocked. The alt text "Summer Sale — 30% Off All Orders" communicates the message even without the image. Test this by disabling images in your email client or using an email preview tool like Litmus or Email on Acid.
Generating Email Placeholder Images with the Right Dimensions
- Open the placeholder image generator.
- Enter your @2x dimensions — for a 600x200 displayed header, enter 1200x400.
- Set the background to your brand primary color (enter the hex code).
- Add a label like "Email Header 1200x400 @2x" so the intent is clear in your template files.
- Download and reference in your template HTML with
width="600" height="200"attributes set explicitly.
Always set explicit width and height attributes in email image tags. Some email clients ignore CSS dimensions and rely on the HTML attributes to size the image cell correctly.
Generate Email Template Placeholders
Enter your 2x email image dimensions. Set your brand color. Download PNG for your template. Free, no account.
Open Free Placeholder Image GeneratorFrequently Asked Questions
What email clients block images by default?
Outlook (desktop) blocks images by default and requires a click to load them. Gmail on Android sometimes blocks images on slow connections. Many corporate email environments block external images entirely. Always test with images disabled.
Can I use background images in HTML email?
CSS background-image has poor support in email clients, especially Outlook. Use inline HTML images with explicit width and height attributes instead of CSS backgrounds for email templates.
What format should email images be — PNG or JPG?
JPG for photos (smaller file size, faster load), PNG for logos and graphics that need sharp edges or transparency. Most email service providers support both. Avoid GIF for anything other than simple animations. AVIF and WebP are not widely supported in email clients.
How do I test email layout with images blocked?
In Gmail: open Settings > Images > Ask before displaying external images. In Apple Mail: go to Preferences > Viewing and uncheck "Load remote content in messages". Litmus and Email on Acid offer screenshot previews with images off for all major clients.
