An email footer with a signature image can look sharp and consistent across clients, or it can arrive as a giant blurry rectangle that pushes the message sideways. The difference is mostly preparation: a sensible canvas size, a transparent PNG, a display width that fits the footer, and alt text for the people whose email client blocks images.
This guide covers the image itself. The signature maker creates a transparent PNG; it does not build a complete email signature block with your job title, phone number, social icons and legal disclaimer. For the full signature workflow, start with the signature maker guide.
Why use an image instead of a signature font?
A font renders differently depending on the recipient’s device, and email clients are notoriously inconsistent about which fonts they load. An image renders the same shapes everywhere the message is displayed, as long as the client shows images at all. That consistency is useful when your signature is part of your brand, or when you want the exact slant and spacing you approved.
The tradeoff is that an image is a fixed block. It does not reflow like text, it may be blocked by default, and it can look wrong in dark mode. Text remains accessible and searchable; an image needs alt text to be understood when it does not load. Many footers combine both: a text block with name and contact details, and a small signature image for the personal mark.
Pick dimensions and format for the footer
A common target is about 600×200 pixels for the image file, displayed smaller inside the footer. The 3:1 shape matches a typical signature and leaves room for an underline or a short title if your design includes one. Start with a 1200×400 master, then save a 600×200 copy for the footer. Keeping the master means you can produce a larger version later without redrawing.
PNG is the right default because it preserves transparency and keeps thin strokes crisp. JPG is smaller but fills transparent areas with white, which produces a visible rectangle on any non-white background. If your footer already sits on a white card, a high-quality JPG can work, but PNG gives you more flexibility and avoids a surprise when the design changes.
| Placement | Suggested image width | Format | Note |
|---|---|---|---|
| Standard email footer | 600 px file, displayed near 200 px | PNG | Transparent background, dark ink |
| Narrow mobile footer | 480 px file | PNG | Test at the smallest width you support |
| White card or newsletter block | 600 px | JPG or PNG | JPG loses transparency |
| High-resolution master | 1200 px | PNG | Export source, then derive smaller copies |
Do not use a 4000px phone photo as the footer image. It will be scaled down anyway, and the extra bytes make the message heavier for no visual gain. If you only have a large scan, resize and compress it before inserting it.
Export a footer-ready signature
Open the signature maker and draw with a mouse, touch or pen, or type your name in a cursive font. Use a stroke around 3px on the 1200×400 canvas and choose near-black or deep navy ink. Preview against white and dark surfaces, because a transparent PNG will sit on whatever background the email client provides.
Export the PNG at full size and save it as your master. Then create a 600×200 copy for the footer. If your email platform asks for a file under a certain size, run the copy through the image compressor and resize it to the exact dimensions rather than letting the email client squash a larger file. Keep the master untouched so you can make a light-ink variant for dark mode later.
Example 1: a consultant’s Gmail footer. Maya exports a 600×200 PNG with 3px dark navy ink, then inserts it in her Gmail signature settings at about 200px wide. She adds a plain-text line underneath with her role, email address and website. The text carries the contact details if images are blocked, and the image supplies the personal mark. She keeps a 1200×400 master in a private folder for future use.
Example 2: an Outlook footer for a small team. The team uses one shared signature image at 480px wide so it fits a narrow reading pane. Each person inserts the same PNG at the same display width, then edits the text lines with their own name and phone number. The shared image keeps the brand consistent, while the text block stays searchable and accessible.
Add the image to your email footer
In Gmail, open Settings, find the signature editor, and use the image button to insert the PNG. Set the display width so the signature does not dominate the message. In Outlook, the signature editor is under File, Options, Mail, Signatures; the insert-image control works similarly. Other clients have their own signature settings, but the pattern is the same: insert the file, set a width, add alt text if the editor exposes it, and send a test message to yourself.
Test the result in more than one client if you can. Gmail, Outlook, Apple Mail and mobile apps all render images differently. Check the footer on a phone, where the available width is smaller, and confirm that the image does not force horizontal scrolling. If it does, reduce the display width or use a narrower crop.
Do not place the image inside a table cell that is narrower than the image’s display width. Many email templates use tables for layout, and an oversized image can break the column. Set the image width in the editor rather than dragging it to fill the space.
Alt text and the dark-mode caveat
Alt text describes the image when it cannot be displayed. Write something short and useful: alt="Signature of Maya Chen". Do not repeat your entire job history in the alt attribute. If the image contains your name and nothing else, the alt text can simply say whose signature it is. Some email editors hide the alt field, so add it in the HTML if you control the template.
Dark mode is the most common visual failure. A transparent PNG with dark ink can disappear against a dark background, and some clients invert or dim images unpredictably. There is no single fix that works everywhere. The practical approach is to export a second version with light ink for dark backgrounds, test it in the clients your recipients actually use, and consider placing the image on a light card if the design allows. Do not assume the client will preserve your intended colors.
A signature image is not a logo, and it does not need to be visible at every screen width. If the footer becomes crowded on mobile, let the text block carry the information and hide or shrink the image. The message should remain readable even when the image is blocked, inverted or stripped by a corporate mail gateway.
File weight, deliverability and what the tool does not build
Keep the image light. A footer image should be tens of kilobytes, not megabytes. Large images slow down loading, may be clipped by some clients and add unnecessary weight to every message in a thread. PNG line art at 600×200 is usually compact; if yours is not, check that you did not export a photo or a full-page scan. The image compressor can resize and re-encode a copy without touching the master.
The signature maker makes one signature image at a time. It does not generate an email-signature block, insert itself into Gmail or Outlook, add social icons, create a disclaimer or manage a team-wide template. Those parts belong in your email client or template editor. The tool also does not remove the background from a photographed signature, so start from a clean canvas rather than a picture of paper.
For the visual basics, see transparent signature PNG. If the same mark will also go on a PDF, signature size for PDF explains the placement dimensions. And if you are comparing a hand-drawn mark with a typed one, drawn vs typed signature walks through the tradeoffs.