Skip to content

Why your email signature should be HTML, not an image

By the CodingEagles Team 6 min read June 14, 2026 · Updated July 1, 2026 Reviewed by the Hivly studio
email signaturehtml emailoutlookgmailproductivity

An image signature is one flat picture: no clickable links, no selectable text, and a blank box the moment a client blocks images. HTML survives all three.

Why your email signature should be HTML, not an image — Hivly

You built a nice email signature, took a screenshot of it, and pasted the picture into your email settings. It looks perfect in your own inbox, so the job feels done. Then a client replies asking for the phone number they could not tap. Someone else sees a broken-image box where your details should be. On a third person’s phone the whole thing is a pale grey smudge. The picture was the problem.

TL;DR: An image signature is a single flat picture. Its links are dead, its text cannot be read or selected, and it disappears the moment a mail client blocks images. An HTML signature keeps links clickable and text visible everywhere, which is why it is the format that actually works.

Try this before you read on

Here is a check you can run in ten seconds. Open a message you already sent, find your signature, and try to select the text with your mouse the way you would highlight a sentence to copy it. Then hover over your website link and click it.

If nothing highlights and the link does nothing, your signature is an image. Every word in it is paint. If you can drag-select the words and the link opens your site, it is real HTML and you are already fine.

You can push the check further. Most mail clients have a setting to stop loading remote images automatically. Gmail calls it “Ask before displaying external images”; Outlook and Apple Mail have their own version under privacy or reading settings. Turn it off, then reopen an email that carries an image signature. Watch the whole signature turn into a blank box or a broken-image icon. That is exactly what a lot of your recipients see, and you had no idea.

An image is one flat picture with no working parts

When your signature is an image, everything in it is paint. The email address is not an email address, it is coloured pixels shaped like one. The phone number cannot be tapped. The link to your site goes nowhere, because there is no link, only a picture of underlined text. Anyone who wants to act on your details has to retype them by hand, which is the friction a signature is meant to remove.

It is also invisible to anyone using a screen reader. There is no real text to read out, only an image that may or may not carry alt text, and a pasted screenshot almost never does. Search inside a mailbox misses it for the same reason. A colleague who searches their inbox for your phone number six months from now will not find it, because as far as the software is concerned the number was never written down.

Blocked images leave a blank where you used to be

Plenty of mail clients block remote images by default until the reader loads them. With a normal HTML signature that is a small cosmetic thing. Your photo or logo does not show, and the text around it carries on. With an image-only signature, blocking images erases the whole thing at once. The reader sees an empty box or a broken-image icon, and your name, role, and contact details are all gone together.

You have no control over this setting. It lives in the recipient’s client, often switched on for privacy or to save data, and you will never know it happened. Betting your entire professional footer on the reader choosing to load images is a bet you lose without ever hearing about it.

Dark mode and sharp screens expose the seams

A signature image is baked at one size on one background. Open it on a phone and it either shrinks to unreadable or forces sideways scrolling. Open it in dark mode and a signature designed on white can sit in a glaring white rectangle against an otherwise dark email, or dark text can vanish into a dark background.

There is a resolution problem too. Phones and modern laptops pack two or three device pixels into every CSS pixel. A signature image saved at normal size gets stretched across those extra pixels, so it looks soft and blurry next to the crisp text around it. Save it big enough to stay sharp and it turns oversized, spilling past the width of the message. You cannot win both at once with a fixed picture.

Real HTML sidesteps all of it. Text resizes for the screen, the layout adapts, the type stays sharp at any pixel density because it is drawn by the reader’s device, and a signature built with sensible colours holds up in light mode or dark. The signature stops being a fixed sticker and becomes part of the email.

Why HTML signatures still lean on tables

Here is the part that surprises people. A reliable HTML signature is built from HTML tables with styles written inline on each element, a technique that looks dated next to modern web layout. The reason is the mail clients themselves. Outlook in particular strips out style blocks and ignores much of the CSS that ordinary web pages rely on, so the clever layout you would use on a website falls apart in an inbox.

Tables with inline styles are the lowest common denominator that every major client agrees to render the same way. It is not pretty, but it is the structure that survives Gmail, Outlook, and Apple Mail without rearranging itself. This is why a signature you hand-code for the web often breaks in email, and why dedicated tools generate the table version for you.

Build it once, paste it in

The workflow is short. Build the signature as proper HTML, with your photo or logo referenced from a public URL rather than pasted in, then copy it and paste it into your mail client’s signature settings. Because it is real markup, the links stay clickable, the text stays selectable, and the layout holds across clients.

The email signature builder generates that table-based HTML for you and copies it ready to paste, so you get a signature that works in every inbox without writing a line of code. Run the select-and-click check on it afterward. The words will highlight and the links will open, which is the whole point.

Try the email signature toolsBuild a polished, email-safe signature with your details, layout and colour, then copy it straight into your mail client.

Frequently asked questions

Why not just use an image as my email signature?
An image is one flat picture, so its links are not clickable, its text cannot be selected or read by a screen reader, and many mail clients block remote images until the reader chooses to load them, which leaves a broken-image box where your details should be. HTML keeps the links live and the text visible even when images stay off.
Why do HTML signatures use tables instead of modern CSS?
Major mail clients, Outlook most of all, strip out style blocks and ignore a lot of modern CSS layout. Table-based HTML with styles written inline on each element is the one structure that renders the same across Gmail, Outlook, and Apple Mail, which is why signature tools still build it that way.
Will my logo or photo still work in an HTML signature?
Yes, but the image has to be hosted at a public URL and referenced, not pasted in, because email cannot carry a local file. If a recipient blocks images, the photo is the only part that goes missing. Your name, links, and layout still arrive as real text.
How can I check whether my signature is really an image?
Open a sent message and try to select the text of your signature with the mouse. If nothing highlights and you cannot click your own website link, it is a picture. Real HTML lets you drag-select the words and click the links.
How do I add an HTML signature to Gmail or Outlook?
Build the signature, copy it, then paste it into the signature box in your mail client settings. Because it is real HTML, the formatting, links, and images carry across. Each client has its own settings screen, but the paste step is the same.

Building something bigger?

Hivly is made by CodingEagles, a software studio that ships production web apps. If you have a real project, get in touch.

See what CodingEagles does →