Email Signature HTML Checker — What Will Break in Gmail, Outlook and Apple Mail
Email clients are not browsers. Outlook for Windows still renders with Microsoft Word, Gmail rewrites your CSS, and Apple Mail quietly discards a style block the moment you paste a signature into its preferences. Paste your HTML below and see what each of them will do to it.
Paste your signature HTML
It is checked in your browser and never sent anywhere — there is no upload and no server to receive it. Every finding names the client that breaks and what to do instead.
The six things that break signatures most often
Export logos as PNG, never SVG
This is the single most common fatal mistake. Gmail strips <svg> out of the message entirely, and Outlook has never rendered it — so the file that looks crispest in your browser is the one guaranteed to vanish. Export at twice the display size for retina screens and set the real width and height attributes to the display size.
Inline every style — no style block, no classes
Write style="color:#1d1d1f;font-size:14px" on each element rather than collecting rules in a <style> block. Gmail and Outlook.com rewrite or discard style blocks, and classes only work if a stylesheet survives — which it usually does not. This is also why a signature can look perfect in a browser preview and wrong the moment it reaches Apple Mail.
Host images at permanent https:// URLs
Three things all fail. A relative path has nothing to resolve against once the message leaves you. A base64 image is blocked outright by Gmail and Outlook. An attached image travels as a real attachment, so every message carries a paperclip and Outlook often shows ATT00001.png instead of your logo. Use a full https:// URL on a host that will still answer in a year.
Or skip the manual setup
Autograph designs the signature on your Mac and installs it into Apple Mail in one click — images hosted at permanent URLs, assigned to the right account, and re-applied automatically when a macOS update or iCloud sync wipes it.
Download freeUnlock Pro — one-time, no subscriptionGive every image width, height and alt
Without explicit width and height attributes Outlook draws an image at its native pixel size, so a 1200px logo tears the layout apart. Without alt text, the recipient — whose client almost certainly blocks images on first view — sees an empty box where your name should be. Both take seconds and both are routinely missed.
Lay it out with a table, not flexbox
Outlook for Windows uses Word’s rendering engine, which supports neither flexbox nor grid. A layout built with them collapses into a single stacked column. A table with one row and a cell per column is not old-fashioned in email — it is the only structure that behaves the same everywhere.
Keep it small, and check it in dark mode
Gmail clips a message past roughly 102KB and hides the remainder behind a “View entire message” link, which is exactly where a signature sits. Separately, set an explicit background colour and text colour: clients that invert for dark mode treat unstyled text very differently from styled text, and a logo with a baked-in white background will glow on a dark card.
Why Outlook is the difficult one
Outlook for Windows has rendered HTML mail using the Microsoft Word engine since 2007. Not a browser engine — the word processor. That single fact explains most of the list above: no flexbox, no grid, no positioning, no max-width, no background images without VML, no rounded corners, no shadows.
It is worth being precise about which Outlook, because they do not agree with each other. Outlook for Windows is the strict one. Outlook for Mac and Outlook on the web use ordinary web engines and behave far better. So “it looks fine in Outlook” from a Mac user tells you almost nothing about what a Windows colleague sees.
Why it looks right in the browser and wrong in Apple Mail
This is the most common bug report we see, and it has a specific cause. When you paste a signature into Apple Mail’s Signature preferences, Mail takes the rendered content, not your source. A <style> block is not rendered content — so it is dropped, and every rule in it goes with it. Inline styles survive because they are attached to the elements themselves.
That is also why signatures reappear looking stripped after a macOS update or an iCloud sync: what Mail stored was never your HTML in the first place.
What this checker cannot tell you
It reads markup. It does not render your signature, and it does not test your images — so it cannot tell you whether the URL you used will still resolve next year, whether your logo is sharp on a retina screen, or whether your colour contrast works on a dark background. It also cannot promise that clean markup renders identically everywhere, because nothing can.
What it does reliably is catch the specific, well-documented constructions that cause the great majority of broken signatures — the ones that are invisible until someone else opens the message.
A note on privacy
The check happens in your browser. Your markup is not uploaded, not logged and not sent anywhere — there is no server here to receive it. You can confirm that by opening your browser’s network tab while you paste: nothing goes out. That matters because a signature block contains your direct line, your address and sometimes a client’s name.
Or never write the HTML at all
Everything on this page is a constraint Autograph already works within: tables not flexbox, inline styles not style blocks, PNG not SVG, images hosted at permanent URLs with real width and height. It designs the signature on your Mac and installs it into Apple Mail in one click.
Download Autograph free See the templatesCommon questions
Is my signature HTML uploaded anywhere?
No. Every check runs in your browser using JavaScript already on the page — there is no upload, no logging and no server to receive it. If you want to verify that, open your browser’s network tab and paste: no request is made. A signature block usually contains a direct phone number and an office address, so this is worth being able to check rather than take on trust.
Why does my signature look right in the browser but wrong in Apple Mail?
Almost always a <style> block. When you paste into Apple Mail’s Signature preferences, Mail keeps the rendered content rather than your source, and a style block is not rendered content — so it is discarded along with every rule in it. Inline styles survive because they travel on the elements themselves. Run your HTML through the checker above and it will flag this.
Do I really still need tables in 2026?
In email, yes. Outlook for Windows renders with the Microsoft Word engine, which supports neither flexbox nor grid, and it is still a large share of business email. A layout built with modern CSS collapses into one stacked column there. A single table with one row is not a legacy hack in this context — it is the only structure that behaves consistently across clients.
Why are my images not showing for recipients?
Three usual causes, and the checker flags all three. A relative path has nothing to resolve against once the message leaves you. A base64 data: image is blocked by Gmail and Outlook. An embedded cid: image is really an attachment, which is why Outlook shows ATT00001.png. The fix in every case is the same: a full https:// URL on a host that will still be there in a year.
The checker says my signature is over 102KB. Does that matter?
Yes, in Gmail. Past roughly 102KB Gmail clips the message and hides the rest behind a “View entire message” link — and since a signature sits at the bottom, it is the first thing to disappear. The usual culprit is a base64-embedded image, which is also blocked for other reasons. Host images at a URL instead and the size problem generally solves itself.
The Apple Mail Signature Fix Kit
A free checklist: why Apple Mail signatures vanish after macOS updates, the iCloud sync gotcha that wipes them, and how to make your images render in Gmail and Outlook. Straight to your inbox.