Use the width of the email content block as your starting point: about 600 pixels for a 600-pixel template or 660 pixels for a 660-pixel builder. For sharper rendering on high-density screens, export the artwork at up to twice that width (1,200–1,320 pixels) and let the email layout scale it down. There is no universal header height; choose a proportion that suits the design, preserve the aspect ratio, and keep important details inside the area that remains visible on narrow screens.
Those figures are practical recommendations from Mailchimp, not a standard enforced by every email service. Your selected template, inner padding, column structure and image treatment determine the correct file.
Recommended email header widths at a glance
Mailchimp’s legacy templates are designed around a 600-pixel content width, while its new builder uses 660 pixels. Its image guidance allows a source image up to twice the displayed width so that it can be reduced cleanly for dense screens.
| Layout | Displayed width | Suggested high-density source | Where the figure comes from |
|---|---|---|---|
| Legacy full-width template | 600 px | Up to 1,200 px | Mailchimp image guidance |
| New-builder full-width template | 660 px | Up to 1,320 px | Mailchimp image guidance |
| General banner guidance | 600–700 px | Use the actual block width when known | Mailchimp banner guidance |
Mailchimp describes its templates as no greater than 600px wide to fit the display capabilities of most email clients. That statement applies to the cited Mailchimp templates; it is not a universal limit for every provider. Check the campaign builder’s content width before exporting your header.
#1 Best Overall
Mailchimp’s image recommendations and template-width documentation explain these ranges.
How to calculate the real image width
Start with the content block, not the outer canvas
The usable width is the space inside the email container after padding. A 600-pixel area with 10 pixels of padding on both sides leaves a 580-pixel image slot. Exporting a 600-pixel image for that block is acceptable because the builder can reduce it, but designing to the 580-pixel slot gives you more predictable edge alignment.
Account for columns
Images in columns need their own dimensions. Mailchimp lists these minimum widths for its two builders:
| Layout | Legacy-builder minimum | New-builder minimum |
|---|---|---|
| Full-width section | 564 px | 660 px |
| Two-column section | 264 px | 330 px |
| Three-column section | 164 px | 220 px |
| Four-column section | 132 px | 165 px |
These are recommendations for Mailchimp content blocks, not guarantees for another ESP. Measure the actual column after gutters and padding are applied. A two-column image that is 330 pixels wide in the builder may have a smaller visible area once internal spacing is included.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Choose one asset per role
- Full-width hero: build to the template’s content width, commonly 600 or 660 pixels displayed.
- Column image: use the measured column width rather than the overall email width.
- Retina source: double the measured display width, then set the HTML or builder display width back to the measured value.
What height should an email header be?
The cited guidance does not establish a universal pixel height. Height depends on the artwork’s aspect ratio, the amount of copy and the point at which the design should hand off to live email text. Keep the image’s proportions intact instead of forcing a fixed height that can distort logos or faces.
Design a safe crop for narrow screens: place logos, product names and calls to action away from the extreme left and right edges. A background image using “cover” can crop horizontally or vertically as the viewport changes, so details near an edge may disappear. An inline image with a responsive width is usually easier to keep intact.
Retina and high-density displays
A 1,200-pixel file displayed at 600 pixels gives a 2× source density; the same principle produces a 1,320-pixel source for a 660-pixel block. Scaling down can make diagonal lines and small lettering appear cleaner on high-density screens. It also increases download size, so do not enlarge an image beyond what the design needs.
Set the displayed width in the email builder or HTML while retaining the larger intrinsic file. Verify that the builder does not replace your width with an automatic crop or a fixed-height setting.
Recommended Free Tools
File format, color and file size
Use broadly supported formats
Mailchimp recommends JPG, GIF or PNG in RGB for broad email-program compatibility. JPG is usually efficient for photographs; PNG is useful for transparency or sharp, flat graphics; GIF is appropriate for simple animation but should remain lightweight and accessible when motion is unavailable.
Keep the file at or below 1 MB
Mailchimp recommends keeping images at or below 1 MB. Compress the exported file and inspect it at 100 percent before lowering quality further. A highly compressed header can make text baked into the image unreadable, while an oversized file may be blocked, delayed or expensive for recipients on mobile data.
Mailchimp notes that 72 dpi is generally sufficient for web. Pixel dimensions and file bytes matter more to email rendering than the dpi metadata.
Inline image or background image?
Use an inline image for essential artwork
A normal image element is the safer choice when the header contains the brand mark, product information or other content that must remain visible. Keep a descriptive alt attribute and put essential wording in live HTML text where possible, so the message still communicates when images are disabled.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Use a background only for decorative treatment
Background images can support a text overlay or a full-bleed visual, but support varies. Mailchimp warns that Outlook clients have limited support for email background images and may show a fallback background color instead. Provide a solid fallback color and test the campaign in the Outlook versions used by your audience. See Mailchimp’s background-image guidance.
Responsive design and text safety
Set images to a fluid width within the content container (commonly width:100%; height:auto;) rather than allowing a desktop-width file to overflow a phone screen. Keep critical text as live HTML whenever possible. Text embedded in a bitmap cannot reflow, enlarge for accessibility or remain legible after a mobile crop.
Check the narrowest supported viewport, not only a desktop preview. Confirm that the logo remains recognizable, the focal subject is not clipped and the first live-text section starts at a sensible point if images are blocked.
Campaign-specific sizing workflow
- Open the template settings. Record the content width (600 or 660 pixels are common Mailchimp values) and the left and right padding.
- Measure the target block. Subtract padding and column gutters. This is the displayed width your artwork must fit.
- Choose the source width. Export at the displayed width for a lightweight image, or up to 2× that width for a high-density source.
- Design the crop-safe area. Keep logos and essential subjects away from edges that a “cover” background or mobile layout could crop.
- Export in RGB. Select JPG, PNG or GIF according to the artwork and compress it to 1 MB or less.
- Set accessibility content. Add useful alternative text and repeat essential wording as live text.
- Send test messages. View the actual campaign in the major clients and phone widths that matter to your list, including Outlook if you use background imagery.
Testing differences between Gmail and Outlook
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. Compare the real received message, not only the builder preview. Inspect image loading, fallback color, line wrapping, clipping, dark-mode behavior and the space reserved while images are blocked. The relevant Google Workspace guidance is available at Create branded emails with customized layouts.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesDo not confuse a campaign header with a Gmail signature image
Google’s Gmail Help page gives signature images a maximum of 100 pixels high by 1,000 pixels wide. That is a limit for the signature feature, not a recommended size for a campaign header. A newsletter header should follow its template or content-block width instead. See Google’s signature troubleshooting page.
Or skip the browser setup
If you need to check how a header looks on a live page or documentation preview, ScreenshotNeo can return a screenshot or PDF through one request. It accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets before capture. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and the response identifies the page verdict and billing result in headers. Its MCP server provides take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.
See the parameter reference in the ScreenshotNeo documentation. The following calls are ready to adapt:
cURL
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}`);The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan. Create a free ScreenshotNeo account.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Troubleshooting common sizing problems
The header looks blurry
Confirm that the source is no wider than 2× the displayed width and that the builder has not enlarged a smaller file. Re-export at 1,200 pixels for a 600-pixel slot or 1,320 pixels for a 660-pixel slot, then compress without destroying fine detail.
The image is cropped on phones
Check whether the block uses a background image with “cover,” and move essential content toward the center. For a fixed composition, switch to an inline image with proportional height and a fluid width.
There is a white or solid-color box in Outlook
The client may not support the background-image implementation. Supply the documented fallback color or use an inline image for the important visual, then retest the actual Outlook versions in your recipient mix.
The image touches the wrong edge
Recalculate the inner width after padding. For example, 10 pixels of padding on each side of a 600-pixel area leaves 580 pixels of usable width. Match the block rather than the outer canvas.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →The file is rejected or loads slowly
Check the byte size against Mailchimp’s 1 MB recommendation, convert to RGB, remove unnecessary metadata and choose JPG for photographic content or PNG for transparency and flat graphics.
Best Value
FAQ
Is 600 pixels still the right email-header width?
It is a sound starting point for a 600-pixel template, but the selected builder and block padding take priority. A 660-pixel builder needs a wider asset.
Should I always upload a 2× image?
No. A 2× source improves density but costs more bytes. Use it when the header contains fine detail and the compressed file remains acceptably small.
Can I put all headline text inside the image?
You can, but live HTML text is more resilient to blocked images, mobile resizing and accessibility needs. Keep essential wording outside the bitmap where possible.
What is the correct size for a Gmail signature banner?
Gmail’s signature guidance allows up to 100 pixels high by 1,000 pixels wide. That rule applies to signatures, not campaign headers.
Frequently Asked Questions
Does a 700-pixel banner work in a 600-pixel template?
It can be scaled down, but designing to the template’s actual content width gives more predictable padding and crop behavior.
Do email headers need a fixed height in HTML?
No universal height is established. Preserve the artwork’s aspect ratio and avoid fixed-height cropping of essential content.
Which format is best for a photographic header?
JPG is generally efficient for photographs; PNG suits transparency or crisp flat graphics, and GIF suits simple animation.
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.
