Email Header Image Sizes: Recommended Dimensions

For a full-width email header, match the image to the displayed content width. A 600 px template generally calls for a 600 px displayed image; a 660 px builder calls for 660 px. For sharper results on high-density screens, prepare a source up to twice as wide—about 1200 px or 1320 px—and scale it down in the email.

These are practical working dimensions from Mailchimp’s template guidance, not a universal email standard. There is no source-backed universal header height. Choose the height for the design, preserve the aspect ratio, and keep important artwork visible on narrow screens.

Recommended dimensions at a glance

Use case	Displayed width	Sharper source width	Height
Legacy 600 px template	600 px	Up to 1200 px	Choose by aspect ratio
New 660 px builder	660 px	Up to 1320 px	Choose by aspect ratio
General banner guidance	600–700 px	Up to about 1200–1400 px	Choose by design

Mailchimp describes legacy templates as 600 px wide and new-builder templates as 660 px wide, and recommends 600–1200 px or 660–1320 px image widths respectively. Its separate banner guidance gives a broader 600–700 px range. Use the actual template and content-block width when they differ.

How to choose the right width

1. Check the template width. Start with 600 px for a legacy layout or 660 px for a new-builder layout.
2. Measure the content block, not just the outer canvas. Padding, borders, and columns reduce the available image width.
3. Decide whether the image is inline or a background. Inline images are generally more predictable across email clients.
4. Create a 2x source when text or fine detail must remain crisp. Export at up to twice the displayed width, then set the rendered width to the template width.
5. Preview at narrow widths. Make sure the subject artwork and any unavoidable text remain visible on mobile.

Account for padding

If a 600 px content area has 10 px of padding on both sides, the usable image width is 580 px. Set the image to the content-block width or let the email builder resize it to fit. An image that is technically 600 px wide can overflow or be reduced unexpectedly when padding is present.

Account for columns

Layout	Legacy minimum	New-builder minimum
Full-width section	564 px	660 px
Two columns	264 px	330 px
Three columns	164 px	220 px
Four columns	132 px	165 px

These are Mailchimp block recommendations. They are useful planning values, not guarantees for every provider. A column image should be sized for the column’s usable width after gutters and padding.

Choosing the height and aspect ratio

No source in the research establishes a universal email-header height. Set height from the artwork and the amount of content that must remain visible. A wide, shallow image usually behaves better as a header than a tall poster, especially on phones.

• Keep the source and displayed image at the same aspect ratio.
• Put essential subjects away from the extreme edges, where responsive layouts or background cropping may remove them.
• Do not rely on a fixed height that distorts the image. Use proportional scaling.
• If the image is a background using cover, expect cropping when the container changes shape.

Example aspect-ratio calculations

If your artwork is 3:1 and the displayed width is 600 px, its proportional height is 200 px. A 2:1 image displayed at 660 px is 330 px high. Keep those calculations in the design file so the exported asset and the HTML agree.

Inline image versus background image

Use a normal <img> element for essential header artwork when possible. Mailchimp documents limited support for background images in Outlook clients; unsupported clients may show only a fallback color. If you need a background, provide a solid fallback and test the actual client mix.

<table role='presentation' width='100%' cellspacing='0' cellpadding='0' border='0'>
  <tr>
    <td align='center' style='background-color:#f2f2f2;'>
      <img
        src='https://cdn.example.com/header@2x.jpg'
        width='600'
        alt='Spring product announcement'
        style='display:block;width:100%;max-width:600px;height:auto;border:0;'
      >
    </td>
  </tr>
</table>

The width='600' attribute gives older clients a dependable intrinsic width. The inline CSS lets responsive clients shrink the image to the available width while preserving its height.

File format, resolution, and compression

• Keep the file at or below 1 MB. Mailchimp recommends this limit for email images.
• Use JPG, GIF, or PNG in RGB. Choose JPG for photographic artwork, PNG for transparency or sharp flat graphics, and GIF only when animation is needed.
• 72 dpi is sufficient for web display. Pixel dimensions matter more than the dpi metadata.
• Compress before upload. Remove unnecessary metadata and check that small type remains legible after compression.
• Do not send a huge source at its native size. A 1320 px source can be useful for a 660 px display, but it still needs to be downloaded by the recipient.

Keep important words as live HTML text whenever possible. Text inside an image can disappear when images are blocked and cannot adapt as well to narrow screens. This follows from the documented differences in email-client rendering and background-image support.

Responsive header markup

The following pattern uses a 1200 px source for a 600 px display. The image scales down without distortion and includes alternative text for blocked-image cases.

<!-- Source exported at 1200 px wide; displayed at 600 px -->
<table role='presentation' width='100%' cellspacing='0' cellpadding='0' border='0'>
  <tr>
    <td align='center'>
      <img src='https://cdn.example.com/email-header-1200.jpg'
           width='600'
           alt='Your headline as live text where possible'
           style='display:block;width:100%;max-width:600px;height:auto;'
           role='img'>
    </td>
  </tr>
</table>

For a 660 px layout, replace both 1200/600 with 1320/660. If the content block is narrower because of padding, use that narrower rendered width instead.

A practical sizing workflow

1. Open the campaign builder and record the template width.
2. Inspect the selected block for padding, gutters, and column count.
3. Calculate the usable display width.
4. Export the artwork at that width and, when fine detail matters, at up to 2x.
5. Compress the file to 1 MB or less while checking readability.
6. Insert it as an inline image with proportional sizing and useful alt text.
7. Preview with images disabled and at narrow viewport widths.
8. Send test messages to the major clients in your audience, including Outlook if it matters.

Preview the rendered header before sending

A browser preview can expose cropping, padding, and responsive issues before a campaign goes out. You can capture a hosted preview page yourself with a headless browser, or use a screenshot API after publishing the preview URL.

DIY browser capture with Playwright

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 600, height: 800 }, deviceScaleFactor: 2 });
await page.goto('https://example.com/email-preview', { waitUntil: 'networkidle' });
await page.screenshot({ path: 'email-header-preview.png', fullPage: true });
await browser.close();

Repeat the capture at 660 px and at a representative mobile width. If the preview is not publicly reachable, expose it only through an authorized staging route or capture it inside your own network.

Or skip the browser setup

ScreenshotNeo captures a hosted preview with one GET request. Before capture it accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response reports the result in X-Page-Verdict and X-Billed headers. Its MCP server also gives Claude, Cursor, and other MCP clients take_screenshot, get_page_info, and capture_pdf tools.

See the ScreenshotNeo API documentation for all options. The basic calls are:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/email-preview -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/email-preview"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/email-preview' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Use a viewport matching the email canvas, a retina scale for crisp inspection, full-page capture for long previews, or a CSS selector when you only need the header block. You can also set dark mode, custom CSS or JavaScript, waits, headers, cookies, user agent, timezone, geolocation, request blocking, caching TTL, signed links, asynchronous jobs, webhooks, and bulk capture of up to 100 URLs per call.

There are no browser dependencies to maintain, failed loads are not billed, and every feature is available on every plan. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

Troubleshooting

Symptom	Likely cause	Fix
Header looks blurry	Source is only the displayed width or was over-compressed.	Export up to 2x the displayed width and compress carefully.
Image is cropped on mobile	Background cover or a fixed-height container is cropping it.	Use an inline image, preserve aspect ratio, or move essential content toward the center.
Image overflows the email	Template padding or a column is narrower than the image.	Measure the usable block width and set width:100%;max-width to that value.
Outlook shows a color instead of the artwork	Background-image support is limited in some Outlook versions.	Use an inline <img> and a fallback background color.
Text disappears with images disabled	Words were baked into the bitmap.	Move essential copy into live HTML text and keep useful alt text.
Screenshot preview is blank	The page has not finished loading or is blocked by authentication.	Wait for a selector or network idle, provide required headers or cookies, and verify the URL is reachable.
Screenshot API reports a bot check	The host challenged automated traffic.	Inspect the verdict headers; do not count the failed capture as a clean shot, and verify the page manually.

Performance, reliability, and cost notes

• Download size affects recipients. Keep the header at or below 1 MB and avoid sending a 2x source when the design does not benefit from it.
• Rendering differs by client. Gmail, Outlook, and other clients do not share one HTML engine. Test the clients that matter to your audience.
• Capture only what you need. A selector capture is usually smaller and faster than a full-page capture; use full-page mode for complete preview audits.
• Control repeat work. A chosen cache TTL can prevent repeated captures of an unchanged preview. ScreenshotNeo cache hits are not billed.
• Automate batches carefully. Bulk capture supports up to 100 URLs per call; asynchronous jobs and signed webhooks are useful for larger review pipelines.
• Track outcomes. ScreenshotNeo returns page-verdict and billing headers so a pipeline can distinguish a clean image from a failed or non-billable result.

FAQ

Is 600 px still the safest email-header width?

It is a useful default for a 600 px template, and Mailchimp documents that width for legacy templates. Confirm the actual builder and block width before exporting.

Should I always export at 2x?

No. Use up to 2x when sharpness matters and the resulting file remains acceptably small. A simple graphic may not need a 2x source.

What height should an email header be?

There is no universal source-backed height. Choose an aspect ratio that fits the design and keeps important content visible on narrow screens.

Can I use the Gmail signature limit for a campaign header?

No. Gmail’s signature guidance allows a maximum signature image of 100 px high by 1000 px wide. That is a separate use case from a campaign header.

What should I do when a header contains critical wording?

Keep the wording as live HTML text where possible, and provide meaningful alt text for the image.

Primary sources

• Mailchimp: Image Recommendations for Content Blocks
• Mailchimp: About Template Images
• Mailchimp: Add a Background Image to an Email or Landing Page
• Mailchimp: About Email Template Widths
• Mailchimp: What Is an Email Banner?
• Google: Troubleshoot issues with Gmail signatures
• Google Workspace Help: Create branded emails with customized layouts