How do I create an animated email signature?
Design a horizontal banner (600 × 150 is a good starting point), animate a couple of elements such as the headline and the call-to-action button, export it as a GIF, then insert that GIF as an image at the bottom of your email signature and link it to the page you want people to visit. Every mail client handles the insert slightly differently, but the file itself is the same everywhere.
Key facts
- File format
- Animated GIF — the only motion format email clients render reliably.
- Starting size
- 600 × 150 px, the default canvas in the Bannerly editor.
- Elements to animate
- Two at most: usually the headline and the call-to-action.
- First frame
- Must contain the offer and the CTA, because Outlook for Windows shows frame one only.
- Cost
- Designing and exporting a banner in Bannerly is free and needs no account.
What an animated email signature actually is
There is no special 'animated signature' format. Mail clients render HTML, and the only widely supported way to show motion inside that HTML is an animated GIF. So an animated email signature is your usual signature block — name, role, contact details — with an animated image sitting underneath it.
That image is doing marketing work. It is the one part of your signature that can change every month: a webinar, a new case study, a hiring push, a seasonal offer. The rest of the signature stays stable.
When animation is worth it
Motion earns attention, and attention is not free. A banner that moves for no reason is just noise at the bottom of every email you send, including the serious ones. Use animation when the movement carries meaning.
- You have a genuinely time-bound message — a date, a deadline, a launch.
- You want to show two things in sequence, such as an offer and then the action.
- The banner is part of a campaign you will actually swap out.
- Your audience reads your emails in a client that supports GIFs.
Skip animation when the signature goes on legal correspondence, invoices, or support replies where a moving advert reads as tone-deaf.
What size should an animated signature banner be?
Signature banners are wide and short so they sit under your details without pushing the reply thread off screen. 600 × 150 is the size Bannerly opens on and a sensible default for most signatures; 600 × 100 is tighter and better for a single line of copy, 600 × 200 gives more room for a logo plus two lines.
A practical starting size for email signature promotional banners.
There is more detail — retina exports, mobile widths, how clients scale images — in the sizing guide.
How to build one, step by step
- 1Start with the message, not the design
Write the one sentence you want someone to read. If you cannot say it in about six words, the banner is carrying too much.
- 2Set your canvas and background
Pick 600 × 150, then choose a solid colour, a gradient or a background video clip. Keep contrast high — the text has to survive being 600px wide in a crowded inbox.
- 3Add your logo, headline, supporting line and CTA
Drag each element on the canvas until the balance looks right. A left-aligned message with the CTA button on the right is the layout most signature banners use for a reason.
- 4Animate two elements, not five
Bannerly has per-element animations and text effects. A headline that slides or pops plus a CTA that draws the eye is enough. Animating everything makes the banner feel unstable.
- 5Check the first frame
Some clients show only the first frame of a GIF. Preview it and make sure that frame alone still says what you need it to say.
- 6Export the GIF and install it
Export from the preview step, then insert the GIF into your signature and hyperlink it to your landing page.
Getting it into your email client
Every client inserts the image differently, and a few will show the GIF as a still. The installation guide covers Gmail, Outlook and Apple Mail step by step, plus what to do when the animation does not play.
Adding your banner in Gmail
- 1Open Settings, then See all settings, and stay on the General tab.
- 2Scroll to Signature and select or create the signature you want to edit.
- 3Place your cursor beneath your contact details and use the insert-image control.
- 4Upload your GIF, then select it and add the link to your campaign page.
- 5Save changes at the bottom of the page and send yourself a test email.
Gmail generally plays animated GIFs in signatures. If the image looks oversized, resize it in the editor before uploading rather than dragging it smaller in Gmail.
Animation not playing?
- Only the first frame shows
- Some clients and some corporate configurations deliberately render the first frame only. This is not something you can override from the sender side — design the first frame to stand alone.
- The image is huge or blurry
- Set the canvas size in the editor and export at that size rather than resizing the image inside your mail client. Scaling by hand after insertion is where most blur comes from.
- The banner does not appear at all
- Check whether images are being blocked in the reading client, and confirm the file actually saved with the signature rather than being pasted as a temporary preview.
- It looks fine for you and broken for the recipient
- Signatures render in the recipient's client, not yours. Test by sending to at least one Gmail address and one Outlook address.
Keeping it useful over time
The advantage of a signature banner is that it is cheap to change. Set a reminder to review it monthly. If the message is out of date — a webinar that already happened, an offer that closed — it costs you credibility on every email you send.
| Situation | What to do |
|---|---|
| Campaign has ended | Swap the banner for an evergreen one rather than removing it entirely. |
| Sending to a formal recipient | Use a static version of the same design. |
| Message changed slightly | Re-open the design and edit the copy instead of starting again. |
| Whole team needs it | Keep one master design and change only the name and link. |
- What to do
- Swap the banner for an evergreen one rather than removing it entirely.
- What to do
- Use a static version of the same design.
- What to do
- Re-open the design and edit the copy instead of starting again.
- What to do
- Keep one master design and change only the name and link.
Email client support
Animated GIFs are supported by most modern mail clients. The important exception is Outlook for Windows (classic), which shows the first frame as a still image.
| Email client | Animated GIF | What to expect |
|---|---|---|
| Gmail (web, iOS, Android) | Plays | The GIF animates and loops as exported. Images may be proxied and cached by Google. |
| Apple Mail (macOS, iOS) | Plays | Animation plays. Wide banners are scaled down to the message width on iPhone. |
| Outlook.com / Outlook web | Plays | Animation plays in the browser client. |
| Outlook for Windows (classic) | First frame only | The GIF is shown as a still image using frame one. Nothing is broken — the message just has to work without motion. |
| Outlook for Mac / new Outlook | Plays | Animation plays in current builds. |
| Yahoo Mail, Superhuman, Spark | Plays | Animation plays; the banner is scaled to the reading pane width. |
- Animated GIF
- Plays
- What to expect
- The GIF animates and loops as exported. Images may be proxied and cached by Google.
- Animated GIF
- Plays
- What to expect
- Animation plays. Wide banners are scaled down to the message width on iPhone.
- Animated GIF
- Plays
- What to expect
- Animation plays in the browser client.
- Animated GIF
- First frame only
- What to expect
- The GIF is shown as a still image using frame one. Nothing is broken — the message just has to work without motion.
- Animated GIF
- Plays
- What to expect
- Animation plays in current builds.
- Animated GIF
- Plays
- What to expect
- Animation plays; the banner is scaled to the reading pane width.
Key terms
- Animated email signature
- An animated email signature is a normal text signature with one animated GIF banner placed underneath the contact details.
- Signature banner
- A signature banner is the wide, short promotional image at the bottom of an email signature, usually linked to a landing page.
- First frame
- The first frame is the opening image of a GIF, and the only thing shown in clients that do not animate.
Sources & further reading
Common questions
Yes. A GIF is just an image as far as your signature is concerned, so it inserts the same way a static image does. Whether the animation plays depends on the recipient's email client.