What size should your email signature logo be? The exact pixel dimensions, file weight budgets, format choices, and Retina (2×) rules that keep your logo crisp in Gmail, Outlook desktop, Apple Mail, and on mobile.
The MailSigCraft Team
MailSigCraft
If your logo looks giant in classic Outlook, blurry on a Retina MacBook, or jagged on an iPhone — the problem isn't the design. It's the size. Email signatures break the normal "design at 1× and let CSS scale it" rule that web pages use, because mail clients each apply their own DPI scaling, image proxy, and rendering engine. The fix is mechanical: export at a specific source size, set explicit width and height attributes, stay under a file weight budget, and pick the right format.
This post is the exact reference — dimensions for every element (avatar, logo, social icons, banner), file size budgets, and the Retina rule that catches almost everyone the first time.
Email images do not respect CSS transform: scale(), srcset, image-set(), or any of the modern responsive-image tools. The way you get a crisp logo on a Retina screen is exactly what the web looked like in 2010: export the PNG at 2× the display size, then constrain it with width="" and height="" HTML attributes (not CSS).
<!-- Source PNG is 100×100, displays at 50×50, crisp on Retina -->
<img src="logo.png" width="50" height="50" alt="Acme Inc">
If you skip the explicit width/height attributes, classic Outlook for Windows displays the image at its native pixel size — a 100×100 source becomes a giant 100×100 logo in the recipient's inbox, completely overpowering the text next to it.
Use these as starting points. The "display" column is what the recipient sees; the "source" column is what you actually export from your design tool.
A circular or square photo of the sender. The most common email signature image, and the one Outlook scales most aggressively.
Email clients can't render border-radius: 50% consistently. To get a circular avatar, mask the photo to a circle before exporting (your design tool will save a square PNG with transparent corners). Don't try to round-clip it with CSS — Outlook will square it back out.
Wider than it is tall. The most common case for B2B signatures.
JPG does not support transparency. If you flatten a logo onto a white background and the recipient is in dark mode, they will see an ugly white rectangle around your logo. PNG with a transparent background fixes this — but the file is 30–50% larger than the equivalent JPG. For logos, eat the cost; for photos, pick JPG.
A symbol-only or initials-only logo. Common for designers, agencies, and individuals who want a more visual signature.
The little chips at the bottom of the signature. People drastically over-export these — a 32×32 icon does not need to be a 200×200 source.
data:image/svg+xml (works in Gmail and Apple Mail; classic Outlook strips it)Six social icons at 4 KB each is 24 KB of image weight, plus base64 encoding adds 33%. That's a third of Gmail's 10,000-character HTML budget burned on icons. Pick three channels that actually drive replies, not every account you've ever opened.
The optional wide image below the signature for "book a meeting" CTAs, product launches, or seasonal campaigns. Pro-tier feature.
Gmail mobile crops images wider than the screen width without a horizontal scrollbar. A 600 px banner becomes 380 px of visible banner on a typical iPhone, with the right side cut off. Put your CTA text in the left third of the banner so it survives the crop.
The HTML signature isn't your only constraint — images add weight to every email you send, and large signatures push you toward email-server attachment limits.
That's a soft cap. Below 80 KB, your signature renders cleanly in every client and won't trigger spam-filter weight heuristics. Above 80 KB, some corporate mail servers add a "[External: large signature]" tag, Gmail's image proxy may not pre-fetch the images on mobile (showing placeholders until tapped), and the per-message attachment-limit math starts to bite on threads with 20+ replies.
A reasonable breakdown:
Stay under that and every client renders the signature instantly — no progressive loading, no proxy delays, no spam-score penalty.
A quick decision tree. PNG vs JPG vs GIF vs SVG.
Use for: logos, icon marks, social icons, anything with a transparent background or crisp edges.
Renders identically across Gmail, Outlook (web + desktop), Apple Mail. Transparent backgrounds blend correctly into dark mode. The format you pick by default unless you have a specific reason not to.
Use for: photographic avatars, banner art with gradients and many colors.
30–50% smaller files than PNG for photo content. No transparency support — if you need a transparent background, this is not the format. Always export as sRGB; mail clients ignore color profiles, and a wide-gamut JPG renders with shifted colors in some clients.
Use for: rare and only if your audience tolerates animation.
Animated GIFs play in Apple Mail, Gmail web, and most modern clients — but classic Outlook for Windows shows only the first frame, and corporate mail filters sometimes block them. Use a static PNG of the first frame as a fallback if you ship a GIF banner.
This is the #1 size mistake. People assume "the screen is high-DPI, so I should set the image height with CSS" — but classic Outlook ignores most CSS, and Gmail+Apple Mail both honour explicit width="" / height="" attributes over CSS for images.
A 100×100 source PNG, displayed with CSS only:
<img src="logo.png" style="width: 50px; height: 50px;" alt="Acme">
The same 100×100 source PNG, sized with HTML attributes:
<img src="logo.png" width="50" height="50" alt="Acme">
Always set width="" and height="" HTML attributes on every <img> tag. Even if you also set CSS dimensions, the HTML attributes are what classic Outlook reads.
Even with the right export size and explicit attributes, classic Outlook for Windows still adds its own scaling based on the user's Windows display DPI. A 50-px logo on a 125% DPI machine renders at ~63 px; on a 150% DPI machine, ~75 px.
Add mso-resize and image dimension hints to the surrounding table cell so the Word renderer doesn't apply its own scaling on top. MailSigCraft templates ship with these hints already in place — that's why a signature you export from the editor renders at the same physical size in classic Outlook as it does in Gmail, even on high-DPI Windows machines.
Mobile is where most signatures break in 2026 — over half of business email is read on mobile, and the iPhone screen width tops out at ~390 px in portrait. Your signature has roughly 360 px of horizontal real estate after padding.
Total signature width should fit within 360 px on mobile. A two-column logo + text signature at 200 px logo width works; a 320 px logo doesn't.
Avatars at 60 px display read better on small screens than 80–100 px — leaves more room for the text column.
Social icons at 18 px display are the sweet spot — tappable on a touchscreen (above the 16 px Apple HIG minimum-ish floor) without dominating the signature.
Avoid hairline borders (border: 1px solid) on mobile — high-DPI screens render 1 px borders inconsistently. Use a 2 px border or a colored background instead.
Before you ship the signature to your team or update your own:
Open on a Retina Mac (Apple Mail or Gmail web) — logo and avatar should be visibly crisp at the design dimensions. If they look blurry, the source is 1× instead of 2×.
Open in classic Outlook for Windows — the logo should be the same physical size as on the Mac. If it doubles in size, the width/height attributes are missing.
Open on iPhone Mail / Gmail mobile — nothing should overflow the screen horizontally, no horizontal scrollbar, banner CTA text should be visible.
Manual signature crafting is tedious for exactly this reason — get any one of these wrong (source not 2×, missing HTML attributes, wrong format, oversized file) and the signature breaks on at least one major client. The MailSigCraft editor applies the rules from this post by default: every image upload is auto-resized to a 2× source, explicit width/height attributes are written to the output HTML, transparent PNGs are preserved, and the final signature weight is reported back so you stay under 80 KB.
If your current signature looks broken on one specific client, it's almost always one of these size or attribute issues — and almost always a 30-second fix.
Use for: nothing in production, despite the temptation.
Renders crisply in Gmail web and Apple Mail and supports infinite resolution scaling. But classic Outlook for Windows shows a broken-image icon, and Outlook on Windows is still 30–40% of inbox renders for business email. Until that share drops, ship raster PNG/JPG and skip SVG.
Check the rendered HTML weight — under 80 KB combined for all images. If you're over, the avatar is probably oversized — re-export at the sizes above.