Email Banner Size Guide
Complete reference guide for email banner dimensions. Includes recommended sizes for newsletters, promos, and hero images, email client compatibility data, retina optimization, custom size checker, and image format comparison.
Standard Email Banner
RecommendedBest for: Most email campaigns, newsletters
The most universally compatible size. Works across all major email clients without horizontal scrolling.
Wide Email Banner
Best for: Header branding, minimal banner
Great for adding brand identity without taking too much vertical space. Keeps the focus on content below.
Hero Banner (Tall)
RecommendedBest for: Product launches, announcements, promos
Makes a big visual impact. Best for emails where the image IS the message — product reveals, event invites.
Square Banner
Best for: Social-style content, product showcases
Familiar from social media. Works well for single-product emails. Can feel large — use intentionally.
Full-Width Banner (Modern)
Best for: Modern email templates
Slightly wider than traditional 600px. Some email clients may scale it down, but most modern clients handle it fine.
Retina-Ready Banner
RecommendedBest for: High-DPI displays (Apple, modern devices)
Design at 2x (1200×400) but display at 600×200 using HTML width attribute. Images look crisp on retina screens.
Compact Header
Best for: Logo bar, minimal branding
Just enough space for a logo and tagline. Keeps the email compact and content-focused.
Promotional Banner
RecommendedBest for: Sales, discounts, seasonal promos
Enough room for headline text, CTA button, and background imagery. The workhorse of promotional emails.
Gmail Promo Tab Annotation
Best for: Gmail promotions tab preview
Special size for Gmail's Promotions tab product carousel. Google recommends this exact dimension.
Mobile-First Banner
Best for: Mobile-optimized campaigns
Designed for mobile first, scales up on desktop. Consider this if 60%+ of your opens are on mobile.
Check Your Custom Banner Size
Enter your banner dimensions to get compatibility feedback and optimization tips.
Email Client Compatibility
600px
Safe Max Width
7/9
Responsive Support
7/9
Retina Support
7/9
Dark Mode Support
Quick Reference: Best Practices
Do
- • Use 600px width for maximum compatibility
- • Create 2x resolution images for retina (1200px wide, displayed at 600px)
- • Keep file size under 200KB per image
- • Always set explicit width and height attributes in HTML
- • Use JPEG for photos, PNG for graphics with text
- • Include alt text for every banner image
- • Test in dark mode — your banner might look weird inverted
- • Use the 3:1 aspect ratio (600×200) as your go-to default
Don't
- • Don't use banners wider than 640px
- • Don't put critical text only in images (screen readers can't read it)
- • Don't use SVG for email banners (limited support)
- • Don't rely on background images (Outlook ignores them)
- • Don't use animated GIFs larger than 500KB
- • Don't forget to compress — uncompressed PNGs can be 2MB+
- • Don't assume dark mode won't affect your banner
- • Don't use images as the only content — always have a text fallback
Banner Size by Email Type
Newsletter
Keep it branded but subtle. The content is the star — the banner just sets the tone.
Product Launch
Go big. This is where hero imagery shines. Show the product, create desire.
Sale / Promotion
Include the discount/offer directly in the banner. Make the value proposition impossible to miss.
Welcome Email
Warm and inviting. Show the brand personality. Avoid being too salesy in the first email.
Transactional / Receipt
Minimal. Just a logo bar. The focus should be on the order details, not marketing.
Event Invitation
Event date, time, and CTA should all be visible in the banner. Make it shareable.
Re-engagement
Emotional hook in the banner. 'We miss you' works. Include a clear incentive to come back.
Image Format Comparison for Email
| Format | Best For | File Size | Transparency | Email Support |
|---|---|---|---|---|
| JPEG | Photos, complex images | Small | No | Universal |
| PNG | Graphics, logos, text overlays | Medium | Yes | Universal |
| GIF | Animations, simple graphics | Large | Yes (1-bit) | Universal* |
| WebP | Modern web (not email) | Smallest | Yes | Poor |
| SVG | Web only | Tiny | Yes | Very Poor |
*Outlook 2007-2019 shows only the first frame of GIFs. All other major clients support animated GIFs.
Retina & High-DPI: How to Make Banners Look Sharp
Over 60% of emails are now opened on devices with high-DPI (retina) screens — iPhones, iPads, MacBooks, and modern Android devices. If your banner is designed at 1x resolution (600px wide), it will look blurry on these screens.
The fix is simple:
<!-- Design at 2x, display at 1x -->
<img src="banner-1200x400.jpg" width="600" height="200" alt="Banner" style="max-width: 100%; height: auto;" />
The image file is 1200×400px (2x), but the HTML tells email clients to display it at 600×200px. This means every pixel you see on a retina screen maps to 4 actual pixels in the image, making it look crisp and sharp.
Trade-off: 2x images are roughly 2-4x larger in file size. Compress aggressively — for retina banners, you can use lower JPEG quality (60-70%) because the extra pixels compensate for compression artifacts.
Like this tool? Try Sequenzy for free
AI-powered email marketing with Stripe integration, automations, and built-in analytics.
About this tool
Getting email banner dimensions right is one of those things that seems simple until you realize your beautiful design looks broken in Outlook, gets cropped on mobile, or appears blurry on an iPhone. Every email client renders images slightly differently, and there's no single "perfect" size — but there are some very safe choices that work almost everywhere.
The short answer: 600 × 200px is the safest, most universally compatible email banner size. It works in every major email client, doesn't take up too much vertical space, and gives you enough room for your branding and message. For retina screens, design at 1200 × 400px and display at 600 × 200px.
This guide covers every standard banner size, when to use each one, email client compatibility data, and a custom checker so you can validate your own dimensions. If you're building email campaigns, pair this with our email size checker to make sure your total email stays under clipping thresholds, and use our responsive preview tool to see how your banner looks across devices.
For the rest of your email design, check our dark mode preview tool (because banners can look very different inverted) and our contrast checker to make sure text overlays on banners remain readable.
Frequently Asked Questions
More Free Tools
View all toolsEmail Accessibility Checker
Check your email HTML for accessibility issues. Analyze alt text, color contrast, font sizes, heading structure, link text, and more against WCAG guidelines.
Email List Growth Calculator
Project your email list size over time accounting for new subscribers and churn. Plan your growth strategy with month-by-month projections and find your list's equilibrium point.
Email Footer Generator
Generate a CAN-SPAM and GDPR compliant email footer with your business details. Choose from minimal, standard, or detailed styles and copy the HTML directly into your email templates.
Spam Trigger Word Checker
Scan your email content for words and phrases that trigger spam filters. Identify risky language that could send your emails to the spam folder and get suggestions for alternatives.