Email Header Image Size: Outlook, Gmail, Apple Mail Reference

Recommended email header image dimensions across Gmail, Outlook, Apple Mail, and mobile clients — plus retina handling, file size limits, and the dark-mode rendering issues that ruin otherwise-good headers.

Looking for sizes for other contexts? See our full image size reference.

Quick Answer

Display width 600 pixels, source 1200 pixels (2× retina), height 200–400 pixels. JPG quality 80, file size under 100 KB. This single specification renders cleanly in every major email client — Gmail (web, mobile, app), Outlook (web, desktop, mobile), Apple Mail (Mac, iOS), Yahoo, and ProtonMail.

The rest of this guide covers per-client variations, retina implementation, dark mode, and the file-size constraints (Gmail clipping at 102 KB, in particular) that shape real-world email design.

Recommended Sizes by Client

Why 600 Pixels

The 600-pixel email convention dates back to Outlook 2007–2013, which used Microsoft Word as its rendering engine and rendered email at a fixed 600-pixel content width. That single design constraint shaped two decades of email templates: every major email service provider (Mailchimp, ConvertKit, Klaviyo, ActiveCampaign) defaults to 600 pixels, every email designer learned to work in 600 pixels, and most subscribers mentally expect emails to be roughly that width.

Modern Outlook (web, Microsoft 365, mobile) handles wider layouts gracefully, and Gmail/Apple Mail never had a hard width limit. But Outlook for Windows desktop — still common in enterprise settings — clips or awkwardly scales anything wider than 600 pixels. Designing for the lowest common denominator means designing at 600.

If your audience analytics show essentially zero Outlook desktop usage (some B2C audiences with younger demographics), you can push to 700 or 800 pixels — but the risk-reward is rarely worth it. 600 always works; wider sometimes works.

Retina (2×) Implementation

Apple Mail, Gmail web on retina displays, and most modern mobile email apps render at higher pixel densities. A 600-pixel image displayed at 600 pixels on a retina screen looks slightly soft compared to a 1200-pixel image displayed at 600 pixels.

The pattern is consistent across email design:

<img
  src="header-1200x400.jpg"
  width="600"
  height="200"
  alt="..."
  style="display:block; width:100%; max-width:600px; height:auto;"
/>

The img has a 1200×400 source but renders at 600×200 in the layout. Retina clients render at full 1200-pixel resolution; non-retina clients render at 600 pixels and the extra resolution is silently discarded. The cost is roughly 30–50 KB of additional file weight, which is generally worth it.

File Size and the Gmail Clipping Threshold

Gmail clips emails larger than 102 KB total HTML weight, displaying "[Message clipped] View entire message" at the bottom. Clipping affects more than aesthetics: it can cut off the unsubscribe link (a CAN-SPAM compliance risk), conversion-tracking pixels, and CTA buttons. Avoiding clipping is essential.

The 102 KB limit applies to HTML weight only — images don't count, since they're referenced via URL and loaded separately. But the more inline styles, conditional comments for Outlook, base64-encoded fallbacks, and tracking JavaScript you embed, the closer you get to the limit. Header image file size doesn't directly trigger clipping, but generous headers tend to come paired with generous body images, and the cumulative effect is slow load times even when HTML is fine.

Practical targets:

• Header image (1200×400 retina, JPG q80): 60–100 KB
• Header image (1200×600 taller, JPG q80): 90–150 KB
• Animated GIF header (compressed): 300–800 KB max
• Total email image weight: under 1 MB
• Total email HTML: under 102 KB to avoid Gmail clipping

Dark Mode Rendering

Gmail, Apple Mail, and Outlook all now support dark mode, and the handling is inconsistent across clients. Three rendering behaviors you'll encounter:

• Auto-invert (Gmail). Light backgrounds become dark, dark text becomes light. Sometimes intelligent, sometimes mangled — light gray text on white becomes light gray text on dark gray, which is unreadable.
• Selective invert (Outlook web). Inverts colors below a brightness threshold but leaves images alone. Image backgrounds that match the assumed light background stand out as a visible white box on dark mode.
• Respect (Apple Mail). Renders the email exactly as designed; no auto-conversion. Best behavior for designers because the email looks as intended, but worst experience for subscribers expecting dark-mode consistency.

Three approaches to handling this:

• Design dual-purpose images. Use transparent PNG backgrounds with elements that read on both light and dark — typically dark logos with subtle outlines or shadows. The header looks the same in either mode.
• Use the prefers-color-scheme media query. Limited support but improving. Apple Mail and modern Outlook respect it; Gmail does not.
• Test in dark mode and accept some imperfection. Many marketers ship a single light-mode design and accept that dark-mode subscribers see a moderately compromised version. Generally fine if the brand is primarily light-mode.

Mobile Considerations

Roughly 60% of email opens happen on mobile, and the rendered width on mobile is 320–414 pixels rather than 600. Most modern email clients automatically scale the email to fit, so a 600-pixel-wide layout becomes ~400 pixels on a phone — readable but with downscaled images.

Two things matter for mobile-friendly headers:

• Don't put critical text in the image. Text rendered at 600 pixels but displayed at 400 looks acceptable; text rendered at small sizes within the image becomes unreadable. Headlines and CTAs should be HTML text, not text baked into the header image.
• Avoid tall headers. A 600-pixel-tall header consumes the entire screen on a 5.5-inch phone before the message body is even visible. Subscribers tap the next email instead of scrolling. Stay under 400 pixels of height (200 is better).

Common Mistakes

• Designing wider than 600 pixels. Looks fine on Gmail web, breaks on Outlook desktop, where many corporate subscribers still read email. Stay at 600.
• Not using a retina source. Single-density images on retina screens look noticeably soft, especially for sharp logos and small typography. The 30 KB cost of a 2× source is worth it.
• Putting critical text in the header image. Many subscribers have images blocked by default, especially on corporate Outlook. Image-rendered text becomes invisible. Always reinforce the message with HTML text below the header.
• No alt text. When images don't load, the alt text is what subscribers see. Set descriptive alt text — "Spring sale: 30% off" — not filename or empty alt.
• Forgetting to make the header clickable. Most subscribers tap the header out of habit. Wrap the img tag in an a tag pointing to your relevant landing page, with a unique UTM parameter for tracking.
• Outlook-breaking widths. Outlook's Word-based rendering breaks if you specify image widths in CSS without also setting them as HTML attributes. Always set width="600" height="200" as HTML attributes, not just in style.
• Animated GIF without a frame-1 fallback. Outlook for Windows displays only the first frame of an animated GIF. If your message depends on the animation, the static first frame won't convey it. Design the first frame as a standalone visual that works on its own.

Tools That Help

Email images need aggressive compression because subscribers tend to be on slow mobile connections, image proxies (Gmail, ProtonMail) re-encode and add delay, and the entire email design needs to feel light. Compressing email source images before upload to your ESP is a measurable improvement to subscriber experience.

Frequently Asked Questions

Related Guides

• Best image sizes for websites in 2026 — full reference covering web hero, blog, social, and more.
• Open Graph image size — emails often link to landing pages with og:image previews on subsequent shares.
• Hero image size — landing-page heroes that email subscribers click through to.
• Image formats compared — JPG vs PNG vs WebP for email contexts (TL;DR: stick with JPG for compatibility).
• Find oversized images on your website — audit workflow for catching bloated landing-page images that email traffic hits.

Last updated: May 6, 2026