Signature guide
Email signature size — the pixel dimensions that actually render
There's a set of dimensions that has held true across Gmail, Outlook, and Apple Mail for a decade — and a set that changes every year based on which client is being fussy. This is the current guide, with the rationale for each number.
Live example
One of ten built-in Looks. Every element is editable in the builder — colors, photo, links, tagline.
Preview
ToYourself
SubjectSizing test
Thanks,
Alex
Step-by-step
- 1
Overall signature width — 560 pixels
Gmail's compose window is roughly 640px wide; Outlook's is 620px. A 560px signature has breathing room in both without clipping on mobile (which reflows anyway). Wider than 600px and mobile Gmail starts to horizontal-scroll — the fastest way to look sloppy on a phone. - 2
Logo — 120–200 pixels wide, exported at 2×
Target render width 120–200px, height whatever preserves aspect ratio. Export at 2× (240–400px actual) and set explicitwidthandheightattributes. PNG-24 with transparency, under 30KB. If the logo is monochrome, SVG-to-PNG at 2× stays crisp on any screen. - 3
Headshot — 80 × 80 pixels, exported at 2×
80px rendered, 160px exported (2×). Round or square, cropped tight to the shoulders. JPG at 80–85% quality, under 40KB. Larger photos take up too much vertical space; smaller ones look pixelated on retina screens. - 4
Marketing banner — 600 × 200 pixels at 2×
Render at 600 × 200 (or the same aspect ratio), export at 1200 × 400. Under 200KB. PNG for flat designs, JPG for photos. This is the widest single element; keep everything else narrower. - 5
Social icons — 20 × 20 pixels at 2×
20px rendered, 40px exported. PNG-24 with transparency, ~2KB per icon. Any bigger and they dominate; any smaller and they read as noise. Spacing between icons: 6–8px via a fixed spacer table cell, never CSS margin. - 6
Total signature file size — under 100KB
The killer number nobody talks about: Gmail's "clip message" feature triggers when the entire email HTML (message body + signature) exceeds ~102KB. Once clipped, the recipient sees "[Message clipped] View entire message" and your signature disappears below the fold. Keep the signature under 100KB total — the biggest culprit is oversized banner images (compress aggressively) and inline base64 image data (never do this).
Common questions
›What's the maximum email signature width?
560 pixels is the sweet spot. 600px works but risks horizontal scroll on mobile Gmail. Never wider than 640px.
›How big should my logo be in an email signature?
120–200 pixels wide at render. Export at 2× (240–400px actual pixels) with explicit width and height attributes on the img tag. PNG-24 with transparency, under 30KB.
›What size should a photo/headshot be in an email signature?
80 × 80 pixels rendered. Export at 160 × 160 (2× density) and set width=80 height=80 on the img. JPG at 80–85% quality keeps file size under 40KB.
›How big should an email signature banner be?
600 × 200 pixels rendered, exported at 1200 × 400 (2× density). Under 200KB — beyond that Gmail may clip the message.
›Why is my email getting clipped in Gmail?
Gmail clips messages when the total HTML (body + signature + all inline data) exceeds ~102KB. The usual culprit is a signature with oversized images or base64-inlined data. Move images to hosted HTTPS URLs (don't inline them), compress banners, and the clipping stops.
›What's 2× density and why does it matter?
Retina displays (iPhone, MacBook, high-DPI Windows laptops) render each CSS pixel with 2 device pixels. If you export an image at the exact render size, it looks blurry on retina. Export at 2× and set the CSS size to half — the browser downsamples correctly and the image stays sharp everywhere.
Also useful