Email banner: sizes, design and the image-only trap

A newsletter is built from stacked blocks, and three of them are usually images. The header sits at the very top and carries the logo and the identity of the mailing — often the same image in every send. The hero sits directly under it and carries the campaign: the offer, the season, the product. Below that come content tiles, one per product or topic, and sometimes a footer strip.

Each of those has different requirements. A header must be recognisable at a glance and instantly say who is writing, because that is what stops the message being deleted. A hero must survive being seen at half-size on a phone. A tile is small, repeated, and needs to read as part of a series rather than as three unrelated pictures.

The other constraint is that email is not the web. There is no reliable CSS layout, no webfont guarantee, and no certainty the images will load at all. Every design decision in an email banner has to work when the image is missing.

Almost every email template is built at 600 to 640 px content width, and that is not fashion — it is Outlook. Desktop Outlook does not scale images down to fit the container reliably, so an image wider than the template blows the layout out and forces horizontal scrolling. Design at 600 px width and everything downstream behaves.

Retina screens then need double resolution: export the image at 1200 px wide and set the HTML width attribute to 600 so it displays at half size and stays sharp. That is why the retina header in the set is 1200×400 while the standard header is 600×200. Height is yours to choose within reason: a header around 200 px, a hero between 300 and 400 px, tiles square at 300×300 or 600×400, a footer strip at 600×150. Anything much taller than 400 px pushes the actual content below the fold on a phone.

The image carries brand and atmosphere: logo, colour, product photography, a short headline. It should not carry the offer terms, the discount code, the deadline or the call to action, because none of those survive an image being blocked. Put them in HTML text underneath, where they are selectable, searchable, readable in dark mode and legible when the images never arrive.

Keep the composition simple. Email banners are seen small — the preview pane on desktop is narrow and the phone is narrower — so a single subject with generous space around it beats a collage. Two or three words of headline at most, placed away from the edges so a client that crops slightly does not clip a letter. And give the banner one link rather than an image map: a single click target is clearer, and image maps are unreliable across clients anyway.

The most common newsletter mistake is designing the entire mailing as one big image. It looks perfect in the design tool, and then a large share of recipients see a blank rectangle, because many clients and corporate gateways block remote images until the reader explicitly allows them. An image-only email with images off is an empty email, and it also reads as spam to filters that expect text.

The rule is simple: every message the reader must receive exists as HTML text. Headline, offer, terms and the button all live in the markup. The image adds to that, it does not replace it. A useful test is to switch images off in your own client and read the mail — if it still makes sense and still has a clickable call to action, the build is sound.

Alt text is the second half of that. Give every image a short, meaningful alternative — "Autumn sale, 20% off outerwear" rather than "header" or "banner1" — because in most clients that alt text is what a reader sees in the blocked-image state, and it is what a screen reader announces. Decorative spacers and dividers get an empty alt attribute so they are skipped.

An email client loads every image in the message at once, so weight compounds. Keep individual banners under roughly 100 KB and the whole mailing well under a megabyte; on a slow mobile connection the difference is whether the reader sees the header before deciding to close the message. JPG for photographic banners, PNG for flat colour, logos and text. Avoid WebP and SVG — support across email clients is still unreliable — and avoid transparency, because Outlook handles it badly and dark-mode backgrounds will show through in ways you did not plan.

Dark mode is worth one deliberate decision. Several clients invert or recolour backgrounds, and a logo saved as dark text on transparency then disappears against a dark ground. The safe approach is a banner with its own solid background and a logo that has enough contrast against that background regardless of what the client does around it.

Newsletter banners tend to be the last thing produced and the first thing that drifts off-brand — a different blue, last season's logo, a font nobody else uses. Generating them from the same source as the rest of your advertising removes that drift. Enter your website address and myfeedr reads the logo file, the colour values from your stylesheet, the fonts, the headline, product names, prices and images from the live page, then renders the newsletter formats along with every other size in the set.

You get 7 newsletter formats — header, hero, tiles, a 16:9 block, a footer strip and the 1200×400 retina header — as PNG and JPG, sized for a 600 px template and compressed to keep the mailing light. The same analysis also produces the display, Google Ads and social formats, so a campaign header, a Facebook post and a 300×250 all carry the same look.

The analysis and the watermarked previews are free. Newsletter formats are part of the Complete package; unlocking is a one-off payment with no subscription, after which copy, colours, images and layout variants stay editable.