Email Banner Design: Layout, Size and Best Practices

An email banner is the image at the top of a newsletter or promotional email. It sets the tone, communicates the offer and encourages the reader to keep going. Because email clients behave differently from websites, banner design needs a few special considerations.

Start with the goal

Decide what the banner must do: announce a sale, introduce a new post, welcome a subscriber or promote an event. One goal per banner keeps it clear.

Size and format

• Width: commonly 600 to 640 pixels in the email layout. Export at double that width, such as 1200 pixels, for sharper display on high-resolution screens.
• Height: keep it modest, often 200 to 400 pixels, so the headline and first paragraph remain visible.
• Format: JPG for photos, PNG for flat graphics, and GIF for simple animation. Support for other formats varies across email apps.
• File size: keep it small so the email loads quickly on mobile data. See image compression for web.

Layout tips

1. Use a clear headline of a few words.
2. Add a short supporting line only if needed.
3. Include a button-style call to action. Make the real button live text in the email when possible, instead of baking it into the image.
4. Keep important content centred and away from the edges.
5. Use high contrast between text and background.
6. Match fonts and colours to your brand.

Plan for images being blocked

Some email apps hide images by default. If your entire message sits in the banner, those readers see nothing. Therefore:

• Write descriptive alt text
• Keep key information also as real text below the banner
• Set a background colour that makes alt text readable

Mobile first

Many people open email on phones. Check that text remains readable when the banner shrinks, and that buttons are easy to tap. Avoid tiny details.

Animated GIFs

A short, subtle animation can draw attention, but keep the file small and make the first frame carry the main message, since some email apps show only the first frame.

A hypothetical example

A coaching class sends a Diwali discount email. The banner has a warm orange background, the headline "Festive offer: 20% off" and a short date line. The "Enrol now" button is live text beneath. If images are blocked, the alt text and the button still convey the message.

Test before sending

Send test emails to several apps and devices, and check the preview. For broader layout advice read our guide to email design best practices.