For a full-width email header, use the width of the content area—usually 600 px or 660 px. Exporting at up to twice that displayed width (1,200–1,320 px) gives sharper results on high-density screens, then let the email layout scale the image down. There is no universal header height: choose one that fits the design, preserve the aspect ratio, and keep critical content visible on small screens.
These figures are practical platform recommendations, not a universal email standard. Your selected template, padding, columns, image type and recipient clients determine the final dimensions.
Start with the template’s actual content width
Measure the area in which the image will appear, rather than using the overall page or browser width. Mailchimp documents two common template widths:
| Template or builder | Typical displayed width | Recommended source width |
|---|---|---|
| Mailchimp legacy templates | 600 px | 600–1,200 px |
| Mailchimp new builder | 660 px | 660–1,320 px |
Mailchimp says its templates are designed to be no greater than 600 px wide to fit the display capabilities of most email clients. The newer builder uses 660 px layouts. Treat those numbers as working guidance for those builders, not a rule that every email provider must follow. See Mailchimp’s template-width guidance and its image recommendations.
#1 Best Overall
Display width versus source width
The displayed width is what readers see in the email. The source width is the pixel width of the file you upload. For a 600 px slot, a 600 px file is sufficient for standard-density displays; a 1,200 px file scaled to 600 px can look crisper on high-density screens. For a 660 px slot, use 660 px or up to 1,320 px, then set the image to display at 660 px. Do not force a larger file to display at its full size, because that can widen the email or increase download time.
Account for padding and columns
Usable image width is often smaller than the nominal template width. If a 600 px content area has 10 px of padding on both sides, the image area is 580 px. Build or crop the asset for that block, or let the builder resize it while checking that text and logos remain legible.
| Layout | Legacy builder minimum | New builder minimum |
|---|---|---|
| Full-width section image | 564 px | 660 px |
| Two-column section image | 264 px | 330 px |
| Three-column section image | 164 px | 220 px |
| Four-column section image | 132 px | 165 px |
These are Mailchimp block recommendations, not guarantees for every provider. A column image should be sized for its column, not for the full email. Read the details in About Template Images.
A quick sizing calculation
- Identify the template or content-block width.
- Subtract left and right padding.
- For a multi-column row, divide the remaining width among columns and include any gutter between them.
- Export at that displayed width, or at up to twice the width for a high-density source.
- Set the HTML image width to the intended displayed width and allow the height to remain proportional.
How tall should an email header be?
No source establishes a universal header height. Choose height from the artwork and the amount of information it must carry. A wide, shallow banner may be appropriate for a brand mark and short headline; a taller image may suit an editorial hero, but it pushes the message and call to action farther down the screen.
- Keep the image’s aspect ratio intact when resizing.
- Place logos, faces and essential words in a central “safe” area so narrow screens do not cut them off.
- Preview at mobile widths before sending.
- If the design uses a background image with
cover, expect cropping because the container’s aspect ratio changes between devices.
Keep important wording as live HTML text where possible. Text in the document remains available when images are blocked and can reflow on small screens, whereas text baked into a bitmap may disappear or become unreadable.
Choose an inline image or a background image
Inline image: the safer default
Use a normal <img> element for essential header artwork. Include descriptive alternative text, set the intended width, and provide a sensible fallback color. An inline image is generally more predictable than relying on CSS background support.
Background image: useful, but test it
Background images can place text or buttons over artwork, but support varies. Mailchimp notes that Outlook clients have limited support and may show a fallback background color. Use a solid color that still provides adequate contrast, and do not put the only copy of a critical message in the background bitmap. See Mailchimp’s background-image guidance.
Email clients do not render HTML identically. Google notes that some Outlook versions use Microsoft Word to render HTML email, which can produce layout differences from Gmail. Test the actual client mix that matters to your audience; Google’s customized-layout help explains the broader rendering context.
Free tools Windows power users keep installed
One-click scans. No signup required.
File format, color and weight
- File size: Mailchimp recommends keeping images at or below 1 MB. Compress exports while retaining readable type and sharp edges.
- Formats: JPG, GIF and PNG in RGB are the broadly compatible choices documented by Mailchimp. Use JPG for photographic headers, PNG for transparency or crisp flat graphics, and GIF only when animation is genuinely useful.
- Resolution metadata: Mailchimp says 72 dpi is generally sufficient for web. Pixel dimensions and file weight matter more than the dpi field.
- Density: A 2× source is an upper practical target; it is not a reason to upload an unnecessarily huge file.
After export, inspect the compressed file at its intended display size. Thin type, fine lines and small legal text can become illegible after downscaling or compression.
Responsive design and accessibility checklist
- Set a fluid maximum width so the image can shrink below its desktop width on narrow screens.
- Use
height:auto(or the equivalent builder setting) to avoid distortion. - Add meaningful alt text when the image conveys information; use empty alt text for purely decorative artwork.
- Do not rely on color alone to communicate a promotion or status.
- Keep a readable live-text heading and call to action outside the image when feasible.
- Check the message with images disabled, because some recipients or privacy settings prevent automatic loading.
- Verify contrast and legibility in both light and dark viewing environments.
How to select the right dimension: a practical workflow
- Open the campaign template. Record the content-block width shown by the builder, not just the outer canvas.
- Inspect spacing. Note padding, borders and column gutters. A 600 px row with 10 px padding on each side has a 580 px usable width.
- Decide the artwork type. Use an inline image for essential content; use a background only when its fallback and cropping behavior are acceptable.
- Prepare the asset. Export at 1× or up to 2× the usable width, preserve the aspect ratio, and keep the file at or below 1 MB where possible.
- Configure the block. Set the display width to the slot width and let height scale proportionally. Do not insert a 1,320 px file at 1,320 px into a 660 px layout.
- Preview narrow screens. Check that the focal point and any overlaid content remain visible when the image shrinks or crops.
- Test representative clients. Include the major mobile clients and Outlook versions used by your list, plus an images-blocked view.
- Send a controlled test. Look for unexpected whitespace, stretched images, broken backgrounds, missing alt text and excessive download size before the production send.
Common sizing mistakes and fixes
Uploading a 600 px file to a 660 px block
The builder may enlarge it, making the header softer. Re-export at 660 px or up to 1,320 px and display it at 660 px.
Using the full template width despite padding
The image can be squeezed or create overflow. Subtract the block’s horizontal padding and size for the remaining width.
One desktop crop for every device
Important subjects may be cut off when a background uses cover. Move essential content into live text or create a crop with a protected central area.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Embedding all copy in the bitmap
Recipients who block images lose the message, and small screens may make the words unreadable. Keep the heading and call to action as HTML text where practical.
Assuming Outlook behaves like Gmail
Word-based Outlook rendering can alter dimensions and background behavior. Supply a fallback color and test an Outlook sample before launch.
Do not confuse campaign headers with Gmail signatures
Gmail’s signature limit is a separate constraint: Google documents a maximum signature image size of 100 px high by 1,000 px wide in its signature troubleshooting guidance. That limit is not a recommendation for a campaign header. A newsletter header should follow its template or content-block width instead.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you need a reliable screenshot of an email preview, landing page or header mock-up, ScreenshotNeo can capture the target URL with one request. It accepts the cookie or consent banner like a visitor, removes more than 60 known consent platforms plus newsletter popups and chat widgets before capture, and bills only clean shots. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed; each response identifies the page verdict and billing status 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.
Use the API documentation at screenshotneo.com/docs/ for the complete option list. This cURL example captures Stripe as WebP:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo supports full-page and element captures, device presets, custom viewports, retina scale, PDF output, custom CSS and JavaScript, waits, request blocking, cookies, headers, geolocation, caching, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call and a usage API. Every feature is included 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.
Best Value
Frequently Asked Questions
Should I design an email header at 72 dpi?
Mailchimp says 72 dpi is generally sufficient for web, but the pixel dimensions and compressed file size determine how the header displays.
Can I use the Gmail signature limit for a newsletter banner?
No. The 100 px high by 1,000 px wide limit applies to Gmail signature images, not campaign-header blocks.
Is a 2× image always better?
A 2× source can look sharper on high-density screens, but it should be scaled to the slot width and kept within a sensible file size.
The Bottom Line
Measure the real content block, subtract padding, export at that width or up to 2×, preserve the aspect ratio, keep the file near or below 1 MB, and test inline or background rendering across the clients your readers use.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
