Email Banner Size and Header Image Guide
Pick your email width and banner height. Get the size to export for sharp images, a preview, the image code, and resize your own banner in the browser. Free, no sign-up, nothing uploaded.
The size guide needs JavaScript: export at twice the width the email shows, usually 1200 px for a 600 px email.
What Size Should an Email Banner Be?
As wide as your email, exported at twice that width. Most email templates are 600 px wide, a convention rather than a standard, so a full-width banner shows at 600 px and is exported at 1200 px for high-density screens.
The height is yours to choose. Keep the message visible without scrolling on a phone, where a 600 × 300 banner shows at about half that size.
A banner that works
- 2× export: 1200 px wide for a 600 px email
- width attribute set, so Outlook on Windows keeps the size
- Alt text that says what the image says
- JPG for photos, PNG for logos and text
- The only copy of your message inside an image
Common Banner Sizes
For a 600 px template. Click a size in the tool to preview it.
| Banner | Shows at | Export at (2×) | Good for |
|---|---|---|---|
| Logo header | 600 × 100 | 1200 × 200 | Brand line above the content |
| Header banner | 600 × 200 | 1200 × 400 | Newsletters, short announcements |
| Hero image | 600 × 300 | 1200 × 600 | Events, webinars, launches |
| Tall hero | 600 × 400 | 1200 × 800 | A product or a person in focus |
Make the Banner in Four Steps
From design file to a sharp, light image in your template.
- 1
Design at Display Size
Lay it out at 600 px wide, with text large enough to read on a phone.
- 2
Export at 2×
1200 px wide. JPG for photos, PNG for flat colours and text.
- 3
Check the Weight
Open the file in the tool above: it shows the size in KB and can resize a larger file to the export width.
- 4
Place It With the Code
Use the image code: width attribute, max-width and height:auto, plus alt text.
Before You Send
Four things that break banners after the design is done.
- Pardot and Marketing Cloud Next. Account Engagement (Pardot) and Marketing Cloud Next both send the HTML your template holds, so the template’s width decides the banner width. Upload the 2× file and set the displayed width in the image settings or the HTML.
- WebP and AVIF. Not every email client shows them. Support table on caniemail.com (opens in a new tab)
- Gmail Clipping. Gmail cuts emails whose HTML passes about 102 KB (Google doesn’t document the figure). Hosted images don’t count toward it; inline code does. Spam Resource (opens in a new tab)
- Images Off. Some readers see only the alt text. Put the headline and the button in HTML text, not in the banner.
More Free Tools
Email Banner Size FAQ
Short answers to what people ask about banner and header image sizes.
What is the best email banner size?
For a 600 px template: 600 px wide at a height that suits the message, exported at 1200 px wide so it stays sharp on high-density screens.
What size is an email header image?
Usually the full template width, 600 px, and 100 to 200 px high for a logo or header banner. Export at twice that.
Why does my banner look blurry?
It was exported at the size it shows. Phones and most laptops have two or more device pixels per CSS pixel, so export at twice the displayed width.
Why is my banner huge in Outlook?
Outlook on Windows ignores max-width and shows the file at its own size. Set the width attribute on the img tag to the displayed width.
Which file format should I use?
JPG for photos, PNG for logos, flat colours and text, GIF for simple animation. WebP and AVIF are not shown by every email client.
Is my image uploaded?
No. The tool reads it in your browser and resizes it there; nothing is sent to us.
We Make Salesforce Marketing Work for You
Talk to a certified consultant, not a salesperson, and leave the first call knowing your next step.