Email Banner Size: Dimensions for Every Platform

Your email banner is the first thing subscribers see. Get the dimensions wrong and it renders cropped in Outlook, blurry on mobile, or blocked entirely because the file is too heavy. Get them right and it sets the visual tone before a single word is read.

Here are the exact email banner sizes that work across every major platform, plus the responsive design and file size rules that keep your emails looking sharp everywhere.

The Standard Email Banner Size

600 × 200 pixels is the universal safe zone for email banners. This dimension renders correctly across Gmail, Outlook, Apple Mail, Yahoo Mail, and every major ESP.

Why 600px wide? Most email clients cap the viewable content area at 600–640 pixels. Go wider and your banner gets scaled down, which introduces compression artifacts. Go narrower and you leave awkward white space on desktop.

The 200px height is a practical sweet spot. It gives you enough room for a headline, a logo, or a promotional graphic without pushing your actual content below the fold on mobile screens.

That said, 600 × 200 is a starting point. Different platforms and use cases call for different dimensions.

Email Banner Sizes by Platform

Every ESP has its own recommended dimensions and file size limits. Here is what actually works on each one:

The pattern is clear: design at 600px wide, keep individual images under 200 KB, and you will be safe everywhere.

Retina and High-DPI Email Banners

Modern phones and laptops have screens with 2× or 3× pixel density. A 600 × 200 banner looks fine on a standard display, but it appears soft on a Retina MacBook or a flagship Android phone.

The fix: create your banner at 1200 × 400 pixels (2×), then set the display size to 600 × 200 in your HTML. The email client downscales the image for standard screens and displays the full resolution on high-DPI screens.

<img src="banner.jpg" width="600" height="200" alt="Spring sale — 30% off all plans" />

The width and height attributes control the rendered size. The actual image file is 1200 × 400. Every modern email client handles this correctly.

Tradeoff: A 2× image is roughly 2–3× the file size. A banner that weighs 80 KB at 1× might hit 180 KB at 2×. That is still under most platform limits, but it adds up if your email has multiple images. Use Pixotter's image compressor to bring retina banners under 200 KB without visible quality loss.

File Size Rules for Email Banners

Dimensions are half the battle. File size determines whether your banner loads instantly or makes subscribers wait.

Target: under 200 KB per banner image. Here is why:

• Gmail clips emails over 102 KB of HTML. Your images are hosted externally, but oversized images slow rendering and increase the chance of being flagged.
• Outlook blocks images by default for unknown senders. When a subscriber clicks "Download images," large files create a visible delay.
• Mobile data connections still matter. A 500 KB banner on a 3G connection takes 2–3 seconds to load. By then, the subscriber has scrolled past it.

How to Hit That Target

1. Choose the right format. JPEG for photographic banners (gradients, product photos). PNG for banners with text, logos, or transparency. Read the full JPG vs PNG comparison to pick the right one for your design.
2. Compress before uploading. Most ESPs do not compress images well — some do not compress at all. Run your banner through Pixotter's compressor first. A 300 KB JPEG typically drops to 80–120 KB with no visible difference.
3. Resize to exact dimensions. Do not upload a 2400 × 800 banner and rely on the ESP to scale it. Upload at 1200 × 400 (for retina) or 600 × 200 (for standard). Use Pixotter's resizer to hit the exact pixel dimensions before export.

For a broader look at reducing image weight, see our guide on how to reduce image file size.

Responsive Email Banner Design

About 60% of emails are opened on mobile. Your 600px-wide banner needs to look good on a 375px-wide phone screen.

Good news: most email clients automatically scale images down to fit the screen width. A 600px banner renders at 375px on an iPhone without you doing anything.

Bad news: Outlook desktop ignores responsive CSS. It renders at the exact pixel width you specify. If you use percentage-based widths in CSS, Outlook falls back to the original image dimensions, which can break your layout.

The Bulletproof Approach

Use this CSS pattern for banners that work everywhere:

<img
  src="banner.jpg"
  width="600"
  height="200"
  alt="Your descriptive alt text here"
  style="max-width: 100%; height: auto; display: block;"
/>

• width="600" — tells Outlook the exact render width.
• max-width: 100% — tells everything else to scale down on smaller screens.
• height: auto — maintains aspect ratio when scaling.
• display: block — removes the phantom gap below images in some clients.

This single <img> tag works in Gmail, Outlook 2016–2024, Apple Mail, Yahoo, and every major mobile client.

Common Email Banner Mistakes

Uploading massive images and hoping the ESP handles it. ESPs are template engines, not image editors. Resize and compress before you upload.

Using background images for the banner. Outlook does not render CSS background-image in email. Your carefully designed banner shows as a blank rectangle for roughly 30% of corporate subscribers. Use a standard <img> tag.

Forgetting alt text. When images are blocked (Outlook default, corporate firewalls, low-bandwidth mode), alt text is the only thing subscribers see. Write alt text that communicates the banner's message: "Spring sale — 30% off all plans this week" is useful. "Banner image" is not.

Designing at 1× only. Your banner looks fine on your monitor and blurry on your phone. Design at 2× (1200 × 400), display at 1× (600 × 200).

Putting critical text inside the image. If images are blocked, that text vanishes. Keep essential calls-to-action in live HTML text, not baked into the banner graphic.

Quick Reference: Email Banner Dimensions by Use Case

For general email image guidance beyond banners, check the complete email image size guide. If you need signature-specific dimensions, see email signature image size.

FAQ

What is the best email banner size?

600 × 200 pixels is the standard that works across all major email clients and ESPs. For retina displays, create the image at 1200 × 400 pixels and set the display dimensions to 600 × 200.

What file format should I use for email banners?

JPEG for photographic banners with gradients or product shots. PNG for banners with sharp text, logos, or transparent backgrounds. Keep file size under 200 KB regardless of format.

Why does my email banner look blurry on mobile?

You are likely designing at 1× resolution (600 × 200). Mobile devices with high-DPI screens need a 2× image (1200 × 400) displayed at 600 × 200 to render sharply.

What is the maximum file size for email banner images?

Most ESPs allow 1–5 MB per image, but that does not mean you should use it. Keep banners under 200 KB for fast loading across all connections. Gmail clips entire emails over 102 KB of HTML, so every kilobyte counts.

Do email banners work in Outlook?

Yes, but Outlook ignores responsive CSS and does not support CSS background images. Use a standard <img> tag with explicit width and height attributes. Avoid percentage-based sizing for Outlook compatibility.

How do I resize an image to exact email banner dimensions?

Upload your image to Pixotter's resizer, enter the target dimensions (600 × 200 for standard, 1200 × 400 for retina), and download the result. Then run it through the compressor to hit the 200 KB target.