MudraEmail signature banner and logo sizes that won't break in Outlook or Gmail
· 4 min read
Most broken-looking signatures aren't a design failure — they're an image sized for one screen and displayed on three. Here are the dimensions and formats that survive Gmail, Outlook and a phone without extra work.
Logos and headshots
Display a logo at roughly 120–160px wide and a round headshot around 80–100px, but export the source file at 2x that size (so a 150px logo is exported at 300px wide). Mail clients don't reliably downscale crisply, and a 2x export stays sharp on higher-density phone screens without looking oversized on a laptop.
Keep logo files under roughly 40KB. Nothing enforces this, but large images slow down rendering in the preview pane and are the main contributor to Gmail's roughly 10,000-character HTML limit when a logo gets embedded as inline base64 rather than linked to a URL.
Campaign banners
A signature banner works best around 600px wide by 120–150px tall — wide enough to read, short enough that it doesn't dominate the message above it. Anything much taller starts to look like an ad rather than a footer.
Format: PNG, JPG, or GIF
Use PNG for logos with transparency or text, JPG for photos where file size matters more than sharp edges, and be cautious with GIF. Outlook on the web and mobile Outlook play animated GIFs; classic desktop Outlook does not — it shows only the first frame. If a GIF's first frame is a blank or mid-transition state, part of your audience sees something that looks broken.
Always host, never rely on embedding
Reference images by URL rather than embedding them as inline data. A hosted image loads once from a server and is cached; an embedded image inflates the HTML of every single email and is what actually causes Gmail's character-limit truncation.
Hosted images do mean the image has to stay reachable at that URL indefinitely — moving or deleting it breaks the signature retroactively in every email already sent, not just new ones.
Frequently asked
Why does my logo look blurry only on my phone?＋
The logo was exported at display size rather than 2x. Phone screens pack more pixels into the same physical space, so an image sized exactly for a desktop preview gets stretched and softens. Export at twice the display size and this goes away.
Can I use a transparent PNG for a banner?＋
Yes, but check it against a white background specifically — most email is read on white, and text or shapes designed against a colored canvas can lose contrast once the transparency shows through as white instead.
Build a signature your whole team can use
500+ templates, your logo and colours applied across all of them, free to start.
Start free