Email Signature Images That Actually Render: Outlook, Gmail, and Apple Mail

You build a beautiful HTML email signature with a 600-pixel banner image, send a test to yourself, and Gmail renders it perfectly. The same signature sent to a colleague using Outlook 2019 on Windows displays the image at 1200 pixels, breaks the layout of every email they reply to, and triggers the dreaded "download images" warning for every external recipient. Two weeks later your VP of Sales emails a 12 MB inline signature with a personal photo to a customer, the customer's inbox provider clips the message at 102 KB, and the actual sales reply gets buried below a row of red X icons. Email signatures are a mess because every mail client renders embedded images using its own rules, and the rules contradict each other.

Outlook on Windows uses Word's rendering engine. Outlook on Mac uses WebKit. Gmail web uses Chrome's renderer with their own CSS sanitization. Apple Mail respects pixel dimensions but interprets Retina images differently than the web. Some corporate spam filters strip animated GIFs entirely. Some mobile clients refuse to load base64-embedded images on cellular. The only signature image that survives every client is one that's exported at the exact final display size, embedded as a JPG, and hosted on a public CDN rather than attached inline. This guide walks through the format, size, hosting, and rollout strategy that produces signatures that look correct everywhere, not just in the client you tested.

Why your signature renders differently in every client

Outlook on Windows uses Word's rendering engine, which scales images based on the system DPI setting. Outlook on Mac uses WebKit. Gmail web uses Chrome's renderer with their own CSS sanitization. Apple Mail respects pixel dimensions but interprets Retina images differently than the web. The only signature image that survives every client is one that's exported at the exact final display size, embedded as a JPG, and hosted on a public CDN rather than attached inline.

Background: the 102 KB Gmail clip rule

Gmail clips messages whose HTML body exceeds 102 KB by truncating the visible content and showing a "View entire message" link. Signature images don't add to the HTML weight if they're referenced by URL, but if they're embedded base64 inline, the encoded image bytes count fully. A 50 KB JPG embedded base64 adds roughly 70 KB to the HTML weight. Two of those plus a normal email body, and you're clipped. The fix is universal: host signature images on a public URL and reference by src attribute. The recipient's client downloads the image once, caches it, and renders inline thereafter.

Safe pixel widths for signatures

For a logo or brand mark in a signature: 200 pixels wide maximum, 60 to 80 pixels tall. For a full banner signature with photo, title, and contact: 600 pixels wide is the safe ceiling that Gmail won't shrink and Outlook won't blow up. Build the canvas at 2x (1200 pixels wide) for crispness on Retina displays, then specify width="600" in the HTML img tag so older clients don't oversize it. The 2x density means an 80 KB JPG looks sharp on every modern device.

The KB ceiling that every mail app respects

Keep signature images under 100 KB per file. Gmail clips messages that exceed 102 KB in total HTML weight, and signature images count toward that limit. Outlook flags any inline image over 200 KB with a "this message contains large attachments" warning that erodes the recipient's trust. The sweet spot is a single 600x180 JPG signature at quality 80, landing around 40 KB. Squeeze through JPG compressor with a 50 KB target to be safe.

Why PNG signatures break Outlook

Designers love PNG for crisp logos and transparent backgrounds, but Outlook 2016/2019/2021 on Windows has a long-standing bug where PNG signatures get re-encoded as JPGs at low quality during certain operations like forward and reply. The result is a muddy, banded version of your logo appearing in threads. Bypass the problem entirely by exporting your signature as a JPG flattened against a known background. Use PNG to JPG to flatten transparent designs against white or your brand color.

Hosting: inline base64 versus CDN URL

You can embed a signature image as base64 in the HTML or reference it by URL. Base64 is reliable but bloats every email by 30 percent of the image's KB size, and Gmail mobile clients sometimes refuse to load base64 inline. The professional approach is to host the JPG on a public URL (Cloudinary, AWS S3, your own domain) and reference it via standard img src. Caching makes the signature feel instant after the first email loads.

Apple Mail and HEIC paste issues

If you build your signature on macOS and drag a photo from Photos into the signature editor, Apple Mail may embed it as HEIC, which Outlook on Windows cannot render. The recipient sees a broken image icon. Always convert images to JPG before placing them in a signature, using HEIC to JPG for any iPhone-sourced photo headed into business signature templates.

Animated signatures and why they fail

Animated GIF signatures (subtle logo motion, animated headshot) play in Apple Mail and most web clients, freeze on first frame in Outlook for Windows, and are stripped entirely by some corporate spam filters that flag them as engagement tracking. Don't ship animated signatures for business correspondence; ship a static 600x180 JPG and put any video brand content behind a "watch" link instead.

Calculating signature weight before deployment

Total signature weight = HTML CSS bytes + image KB. If you're rolling out a new signature to a 200-person company, multiply: 50 KB per signature times 2 million emails per year times 200 employees equals 20 TB of signature traffic. Use the image file size calculator to model the JPG quality and pixel dimensions that hit a 30 KB target before you push the deployment.

Batch conversion for company-wide rollouts

Marketing teams generating personalized signatures for 50 to 5000 employees often start with PNG exports from a designer template and end up needing JPGs at consistent sizes and weights. Run the directory of PNGs through image converter in batch, target 600 pixels wide, quality 80, output JPG. The same job that took a day in a design tool takes 15 minutes through batch conversion.

Dark-mode signatures

Outlook for Mac, Apple Mail, and the major web clients all support dark mode rendering, but they don't invert your signature image. A signature designed on white background looks like a floating sticker in dark mode threads. Two solutions: ship a signature with a fully opaque background that matches your brand color (works in any mode) or supply two versions with CSS media queries (prefers-color-scheme: dark) so the client swaps to a light-on-dark variant. The CSS approach works in Apple Mail but not Outlook on Windows; the opaque-background approach works everywhere.

Step-by-step: building a cross-client signature

1. Design at 2x. Build a 1200x360 canvas in Figma or your design tool for crispness on Retina screens.
2. Flatten transparency. Composite the design against your brand background color using PNG to JPG.
3. Export as JPG quality 80. Target file size under 50 KB. Push through JPG compressor if oversized.
4. Upload to public CDN. Cloudinary, AWS S3, or your own domain. Confirm HTTPS and long-cache headers.
5. Build HTML signature template. Use a table-based layout (Outlook still requires tables). Reference the image by URL with explicit width="600" height="180".
6. Test across clients. Send to test addresses on Gmail, Outlook desktop (Mac and Windows), Apple Mail, and at least one mobile client.
7. Verify with image info. Confirm the hosted JPG is sRGB and under 50 KB before publishing.
8. Roll out via signature management tool. Exclaimer, CodeTwo, or Microsoft Exchange transport rules let you push the template to all employees.

Common mistakes and how to fix them

• Mistake: PNG signature with transparency. Fix: flatten through PNG to JPG against brand color. Outlook re-encodes PNGs badly.
• Mistake: 1200-pixel signature image displayed at 600. Fix: deliver at 1200 native, set width="600" in HTML. Don't deliver at 600 and let browsers upscale.
• Mistake: base64-embedded signature. Fix: host on CDN URL. Base64 bloats every email and triggers Gmail clip at 102 KB.
• Mistake: HEIC photo dragged into signature on Mac. Fix: convert with HEIC to JPG before insert.
• Mistake: animated GIF signature. Fix: ship static JPG. GIFs freeze in Outlook Windows and get stripped by some filters.
• Mistake: signature over 100 KB. Fix: compress to under 50 KB. Mail clients flag oversized inline images.

Real-world examples

HubSpot's signature template is a 600x150 JPG hosted on cdn.hubspot.com, referenced by URL, rendered at 600 pixels in Outlook/Gmail/Apple Mail. The single template covers 8000+ employees with role-specific text overlays. Stripe's internal signature standard uses a flat-color logo at 200x60 pixels, JPG quality 85, around 12 KB per image. The minimal weight means employees can ship 50 emails an hour without ever clipping in Gmail. Microsoft's own signature rollout via Exchange transport rules pushes a templated JPG signature to all corporate accounts; the IT team confirmed dark-mode compatibility by using an opaque background color matching the Microsoft logo gradient.

Client rendering comparison

Mail client	JPG rendering	PNG rendering	GIF rendering	HEIC rendering
Gmail web	Perfect	Perfect	Animates	Broken
Gmail mobile	Perfect	Perfect	Animates	Broken
Outlook 2019/2021 Win	Perfect	Re-encoded	First frame	Broken
Outlook Mac	Perfect	Perfect	Animates	Renders
Apple Mail	Perfect	Perfect	Animates	Renders
iOS Mail	Perfect	Perfect	Animates	Renders
Spam filter (corp)	Allowed	Allowed	Often stripped	Often stripped

Advanced tips for IT-scale rollouts

• Use signature management software. Exclaimer, CodeTwo, or Mimecast push templates centrally so all employees stay in sync.
• Version the template URL. /signatures/v3/banner.jpg lets you swap visuals without retraining employees on new HTML.
• Set long cache headers. 30-day cache on the hosted JPG so recipients only download once.
• Audit weight quarterly. Sample 50 random sent emails and confirm signature weight stayed under 50 KB.
• Provide a fallback alt text. Recipients with images disabled still see "Company Logo - Director, Marketing - +1 555 0100".
• Don't include social icons inline. Each social icon adds another HTTP request and KB; use a single combined banner.
• Test on cellular. Some signatures load fast on WiFi and crawl on 3G; test from a hotel cellular hotspot to confirm.

FAQ

Why does my signature look bigger in Outlook than Gmail?

Outlook on Windows scales images based on system DPI settings; if the user runs 150 percent display scaling, your 600-pixel signature renders at 900 pixels. Always specify explicit width and height attributes in the img tag.

Should I use SVG for the signature logo?

No. Most mail clients strip or refuse to render SVG inline. Use a rasterized JPG, exported at 2x density for Retina sharpness.

Can I include a profile photo in my signature?

Yes, but include it in the same banner JPG rather than as a separate image. One hosted JPG renders consistently; two or three separate images compound rendering bugs.

What about including a tracking pixel?

Most corporate spam filters strip 1x1 tracking pixels and flag the entire message. Don't include them in business signatures unless your CRM specifically requires them.

How do I update signatures for 200 employees?

Use a signature management tool that pushes templates centrally. Don't ask each employee to manually update their signature; consistency will drop within a week.

Should I include a vCard attachment?

Some teams include a .vcf attachment for contact import. It's optional, adds maybe 2 KB, and doesn't affect image rendering.

Why does my signature show as a download attachment in Outlook?

Most likely the image is referenced inline as base64 or attached as a CID image rather than linked by URL. Re-host on public CDN and reference by URL src.

Tracking signature performance with UTM parameters

Marketing teams often append UTM parameters to URLs in employee email signatures so they can measure traffic driven by personal outreach. The technical risk: long UTM-laden URLs in signature text don't affect image rendering, but they do bloat the HTML weight which can push borderline messages over Gmail's 102 KB clip threshold. Keep UTM parameters concise (utm_source=email-sig is enough; don't add five additional tracking parameters per link). Audit your signature HTML weight quarterly to confirm you're well clear of the clip ceiling.

Multi-language signature variants

Global companies often need signature variants per language: contact info localized, legal disclaimers translated, possibly even brand-name variants per region. Maintain a template per language with consistent visual design (same logo, same banner layout) and variable text overlays. The image asset stays the same across all language versions; only the rendered text and possibly the brand logo localization differs. Use image converter to batch-prepare logo variants per language when expanding into new markets.

Dynamic signatures with promotion banners

Some marketing teams rotate a promotion banner in employee signatures (event registration, webinar invite, product launch). The implementation: host the banner JPG on a URL that the marketing team can update centrally (cdn.example.com/signature-promo.jpg). When marketing wants to swap the promo, they replace the file at that URL and every employee's signature updates automatically on the next email send (or after the recipient's cache expires). The mechanism is cleaner than asking 500 employees to manually update their signature each week. Keep the banner JPG under 50 KB and design it to work over the company-color background of the rest of the signature.

Mobile-first signature layouts

More than 60 percent of business email is now read on mobile first, often before the recipient sees the same message on desktop. A 600-pixel-wide signature renders fine on iPhone 14 Pro and similar Retina screens, but stacks awkwardly on older Android devices with narrower viewports. The fix: design signatures that gracefully wrap to a single column on viewports under 480 pixels wide using table-based CSS. Test on at least one Android device with a small screen before rolling out company-wide. Mobile rendering bugs in signatures are the kind of thing the IT team only hears about from the CEO who is personally affected.

Compliance signatures and legal disclaimers

Regulated industries (financial services, healthcare, legal) often require lengthy disclaimer text appended to every email signature. Don't put this in the image; it must remain plain HTML text so spam filters, archival systems, and accessibility tools can read it. Keep the visual signature compact (logo plus 3-line contact) and append the legal text as standard paragraph HTML below the image. Some compliance frameworks (HIPAA, FINRA, GDPR) audit signature contents periodically; document the template version and rollout date for your records.

Photo-headshot integration in signatures

Sales and customer-facing roles often want a small headshot in their signature. Use a 80x80 circle-cropped JPG embedded in the same hosted banner, not as a separate inline image. The single-banner approach renders consistently; multi-image signatures multiply rendering bugs across mail clients. Photograph headshots at 2x density (160x160 source for 80x80 display), flatten with PNG to JPG, and verify file weight with image info before incorporating into the company template.

Make signatures that render correctly the first time

Email signatures are a tiny payload with outsized impact on how every outgoing message looks. Flatten PNGs cleanly with PNG to JPG, keep weight under 50 KB using JPG compressor, batch-prep dozens of personalized signatures with image converter, convert any iPhone profile photos via HEIC to JPG, and model the KB budget for a full-company rollout with the image file size calculator. Verify the hosted JPG with image info before publishing. Your signature will look crisp in Outlook, sharp in Gmail, and rendered correctly in Apple Mail, instead of broken in one of the three.