Flyers · Glossary
Email header size: 600 pixels wide, and why
An email header is usually 600 pixels wide, the standard width of an email template, with 600 to 700 pixels as the safe range, and 150 to 200 pixels tall. Export the image at twice the size, 1200 pixels wide, and display it at 600 so it stays sharp on high density screens, while keeping the file small.
Email has no platform specification to look up, because every inbox renders HTML its own way. The 600 pixel width is a convention that survives Outlook, Gmail and phones, and the header follows it.
Nuwan Madhusanka · Co-founder
4 min read · Published
| Measure | Value | Source |
|---|---|---|
| Email width | 600 px standard; 600 to 700 px safe range | Glockapps; Mailtrap lists 600, with 640 common |
| Header width | Match the template, 600 to 700 px | Glockapps |
| Header height | 150 to 200 px; up to about 300 px for a hero | Glockapps; Mailtrap up to 200 px |
| Retina images | Make at 2x, for example 1200 px, shown at 600 px | Glockapps, Mailtrap |
| Whole email weight | Emails over 100 KB score worse in spam tests | Email on Acid |
| Gmail clipping | Messages over 102 KB are clipped | Mailtrap |
| Images off | Always add alt text | Email on Acid |
Why 600 pixels
Email clients show messages in a reading pane, often beside a list of other messages, and on phones in a narrow column. Templates settled on 600 pixels because it fits those panes without sideways scrolling, and Glockapps puts the safe range at 600 to 700. Most email builders start at 600 or 640. A header that matches the template width sits flush with the content below it; a wider one forces some clients to scroll or scale the whole message.
Height and the first screen
The header shares the first screen with the subject of the email. Glockapps suggests 150 to 200 pixels for most campaigns and up to about 300 for a hero image. Taller headers push the first line of content below the fold on a laptop, which means readers see a logo and a picture but no reason to keep reading. A slim header with the logo and one image, followed straight away by a headline in live text, usually works better.
Sharp on retina, light on weight
High density screens show a 600 pixel image blurred unless it was made at twice the size. The usual practice, which both Glockapps and Mailtrap describe, is to export the header at 1200 pixels wide and set its display width to 600 in the HTML. Linked images do not count toward the message size, but the HTML does: Mailtrap notes Gmail clips messages over 102 KB, and Email on Acid notes emails above 100 KB score worse in spam tests, so keep code lean.
Common mistakes
Putting the headline, offer and date inside the header image, so they vanish when images are blocked and cannot be read by screen readers. Making the header 800 pixels wide. Using a 600 pixel image on retina screens without a 2x source. Forgetting alt text, which is what people see with images off. And using a dark header that clashes with dark mode in some clients.
Making an email header
The flyer editor has no 600 pixel email canvas, so it does not make this size directly. Its Facebook Post canvas at 1200 by 630 is the same width as a 2x email image, so a design made there can be cropped to 1200 by 400 with the image cropper and displayed at 600 by 200 in the email builder. The image compressor keeps the file light, and the blank 600 by 200 PNG on this page is a ready 1x canvas.
Questions people ask
Should an email header be a PNG or a JPG?
A logo on a flat colour is sharper and often smaller as PNG; a photographic header is smaller as JPG at a moderate quality setting. Whichever is chosen, keep the file small so the email loads quickly on mobile data.
Can I use an SVG logo in an email?
Support is patchy. Can I Email reports that Gmail renders SVG images only partially, by rasterising them into PNG, while Apple Mail and Outlook support them. A PNG logo made at 2x and displayed at half size is the reliable choice across clients, and it stays sharp on retina screens.
How wide should an email be on a phone?
The same 600 pixel template is scaled down to fit the phone screen, or a responsive template stacks columns into one. Text should be live HTML at a readable size, not part of an image, so it reflows and stays legible on a narrow screen.
What happens if images are turned off?
Some clients block images until the reader allows them. The header then shows as an empty box with its alt text, so the alt text should name the brand or the message. Important information belongs in live text, which shows whether or not images load.
Does the header size affect deliverability?
The image file itself is hosted and linked, so it does not count toward the message size. What matters for clipping and spam scoring is the size of the HTML and the balance of text to images. A single header image with plenty of live text below it is a safe pattern.
Make one with flyers
The button opens the generator with this use case already described. Change the wording to match your own.
Create a flyer with OneCraftRelated questions
- Email signature banner size: width, height and weightEmail signature banner size: about 600 x 80 to 600 x 100 pixels, under 40 KB, made at 2x for sharp screens, plus logo sizes and Gmail's 10,000 character cap.
- Snapchat story size: 1080 x 1920 pixelsSnapchat story size: 9:16, made at 1080 x 1920. Snap's ad formats page lists 720 x 1280 resolution and 3 to 180 second videos in MP4, MOV, JPG or PNG.
- Reddit banner size: community and profile bannersReddit banner size: 1920 x 384 (5:1) for a community banner per Snappa, 1600 x 480 per Reddit's community guide as reported by Moda, under 500 KB, PNG or JPG.
Written and checked by the OneCraft team. Last checked .