Back to Tools

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.

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 word counter to make sure your total email stays under clipping thresholds, and use our dark mode preview 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

What is the best email banner size?

The best all-around email banner size is 600 × 200px (3:1 aspect ratio). This width fits within the rendering limits of all major email clients (Gmail, Outlook, Apple Mail, Yahoo), and the height provides enough space for branding without pushing content below the fold. For retina displays, design at 1200 × 400px and set the HTML width to 600.

Why is 600px the standard email width?

600px became the standard because of Outlook. Microsoft Outlook uses the Word rendering engine, which has a maximum content width of around 600px. While modern clients like Gmail and Apple Mail can handle wider emails, designing at 600px ensures compatibility with the millions of people still using Outlook for desktop. Going wider than 640px risks horizontal scrolling or content being cut off.

How do I make email banners look sharp on iPhone and Mac?

Apple devices have retina (2x) screens, so a 600px-wide image actually gets displayed across 1200 physical pixels, making it look blurry. The fix: design your banner at 2x resolution (1200 × 400px for a standard banner) and use the HTML width attribute to display it at 600 × 200px. The email client will show the larger image in a smaller space, making it look crisp. You can use slightly higher JPEG compression (lower quality) for retina images since the extra pixels compensate.

Should I use JPEG or PNG for email banners?

Use JPEG for photographic banners — product photos, lifestyle images, anything with complex colors and gradients. JPEG files are much smaller. Use PNG when your banner has text overlays, logos, or graphics that need transparency or sharp edges. PNG preserves crisp text and supports transparency. Never use SVG or WebP in emails — support is too inconsistent.

How big should email banner files be?

Keep each banner image under 200KB, ideally under 100KB. The total email size (HTML + all images) should stay under 102KB for Gmail to avoid clipping. Many email clients won't load images automatically, so large files mean slow loading when users do choose to display them. Compress images aggressively — for JPEG, quality 70-80% looks fine; for PNG, use tools like TinyPNG.

Do email banners work in dark mode?

It depends. Email clients handle dark mode differently. Apple Mail and Outlook can invert colors, which means a banner with a white background might get a dark background, making elements invisible. Transparent PNGs are especially tricky — what looks great on white might disappear on dark. Always test your banners in dark mode, and consider using our dark mode preview tool. Adding a subtle border or using semi-transparent backgrounds can help.

What about the Gmail Promotions tab image?

Gmail's Promotions tab shows a product carousel with annotations. Google recommends a specific image size of 538 × 138px for these product annotations. This is separate from your email banner — it's metadata that helps Gmail display your email attractively in the Promotions tab. You add it via schema markup in your email headers, not in the email body itself.

Should I use a banner for every email?

Not necessarily. Transactional emails (receipts, password resets) are better with minimal or no banners — just a logo. Plain-text-style emails often get higher engagement because they feel personal rather than promotional. Use full banners for newsletters, product launches, and promotional campaigns where visual impact matters. For simple updates or notifications, a compact header (600 × 100px) or just a logo is more appropriate.

More Free Tools

View all tools

Email Signature Size Guide

Complete guide to email signature dimensions. Includes recommended sizes for photos, logos, social icons, and banners. Covers signature styles (minimal to corporate), email client compatibility, and a custom size checker.

Email Header Size Guide

Complete reference for email header dimensions. Covers logo headers, standard banners, hero sections, and preheader bars. Includes a custom size checker, email type recommendations, and Outlook compatibility tips.

Free AI HTML Email Builder

Build responsive HTML emails with AI chat. Generate subject lines, preview text, and production-ready email HTML with desktop/mobile preview, screenshot-based edits, and code you can copy into any email platform.

Shopify Profit Margin Calculator

Calculate real Shopify profit per order after COGS, shipping, fulfillment, payment fees, returns, apps, and ad cost.