How to Add HTML Signatures with Images to GMail Email Messages
Did you notice anything special about this screenshot of GMail message ? Well, it has an embedded animated graphic instead of the plain text signature.
GMail has a wonderful rich text editor to compose emails but there are some desirable things that you cannot accomplish in GMail using standard techniques. For example:
1. GMail allows plain text signatures but there's no way to embed HTML signatures with images like the ones you see in Yahoo, Hotmail or Microsoft Outlook email.
2. Gmail Rich text editor has standard text formatting features like font sizes, colors, bullets, hyperlinks, indentation, etc. but there's no way to add other HTML tags like TABLE, DIV, EMBED, etc. So how do you embed Youtube videos, sophisticated table layouts, Flash animation movies, inline podcast players like odeo, etc. in GMail ?
3. You can compose new email in either Plain text or Rich text but how to do you compose a new GMail message in native HTML something like a webpage created in Microsoft Frontpage ?
4. Gmail lets you attach pictures to outgoing email but it shows up as an attachment on the recipients' screen. How do make embed a photograph that appears inline with the actual email message ?
5. You want to embed the Feedburner Headline Animator graphic or the Feedburner Subscriber Counter to your GMail signature which is an animated GIF file.
Now the really good news is that you can do all the above easily with GMail and here's how to do it:
To embed an HTML signature with Images in GMail ?
Create an HTML signature snippet using notepad or WYSIWYG editors like Dreamweaver/Frontpage/Golive or online with Geocities/GooglePages/Tripod Lycos. Your signature can have all kind of HTML tags (including DIV, EMBED, TABLE) but all linked Image files, audio files and video clips must be pointing somewhere the web and not on your desktop.
Once you are satisfied with the layout, select the entire portion of the webpage that you want to appear in the GMail signature and drag it to the GMail compose window. Alternatively you can copy it to the clipboard and then press Ctrl+V in the Gmail window.
I have an illustration here:
Step 1: The HTML signature is created in Google Page Creator. Select the entire signature and press ctrl+c.
Step 2: Open a new Gmail compose message window. Now either drag the signature in this GMail window or press Ctrl+V to paste it.
The same technique can be applied to embed anything in your gmail message. Say you want to embed an image between two sentences, just drag the image to your gmail compose window and drop it there. It's that simple but makes you email more appealing as if it's composed inside Microsoft Word or Outlook.
To embed Feedburner RSS feed animator, open that graphic in your browser window and drag-n-drop it anywhere in your gmail message.
You can even point images to your blog or embed HTML forms so that recipients can subscribe to your blog directly from your gmail message. Or create tables in Microsoft word and place them in your email. Or even send entire webpages as email so readers can view the page in the message itself without having to click the link. The possibilities are endless.
Previous GMail Hacks:
» Fix GMail Login Issues
» Control size of your GMail Inbox
» Generate GMail Signature Graphics
GMail has a wonderful rich text editor to compose emails but there are some desirable things that you cannot accomplish in GMail using standard techniques. For example:1. GMail allows plain text signatures but there's no way to embed HTML signatures with images like the ones you see in Yahoo, Hotmail or Microsoft Outlook email.
2. Gmail Rich text editor has standard text formatting features like font sizes, colors, bullets, hyperlinks, indentation, etc. but there's no way to add other HTML tags like TABLE, DIV, EMBED, etc. So how do you embed Youtube videos, sophisticated table layouts, Flash animation movies, inline podcast players like odeo, etc. in GMail ?
3. You can compose new email in either Plain text or Rich text but how to do you compose a new GMail message in native HTML something like a webpage created in Microsoft Frontpage ?
4. Gmail lets you attach pictures to outgoing email but it shows up as an attachment on the recipients' screen. How do make embed a photograph that appears inline with the actual email message ?
5. You want to embed the Feedburner Headline Animator graphic or the Feedburner Subscriber Counter to your GMail signature which is an animated GIF file.
Now the really good news is that you can do all the above easily with GMail and here's how to do it:
To embed an HTML signature with Images in GMail ?
Create an HTML signature snippet using notepad or WYSIWYG editors like Dreamweaver/Frontpage/Golive or online with Geocities/GooglePages/Tripod Lycos. Your signature can have all kind of HTML tags (including DIV, EMBED, TABLE) but all linked Image files, audio files and video clips must be pointing somewhere the web and not on your desktop.
Once you are satisfied with the layout, select the entire portion of the webpage that you want to appear in the GMail signature and drag it to the GMail compose window. Alternatively you can copy it to the clipboard and then press Ctrl+V in the Gmail window.
I have an illustration here:
Step 1: The HTML signature is created in Google Page Creator. Select the entire signature and press ctrl+c.
Step 2: Open a new Gmail compose message window. Now either drag the signature in this GMail window or press Ctrl+V to paste it.
The same technique can be applied to embed anything in your gmail message. Say you want to embed an image between two sentences, just drag the image to your gmail compose window and drop it there. It's that simple but makes you email more appealing as if it's composed inside Microsoft Word or Outlook.
To embed Feedburner RSS feed animator, open that graphic in your browser window and drag-n-drop it anywhere in your gmail message.
You can even point images to your blog or embed HTML forms so that recipients can subscribe to your blog directly from your gmail message. Or create tables in Microsoft word and place them in your email. Or even send entire webpages as email so readers can view the page in the message itself without having to click the link. The possibilities are endless.
Previous GMail Hacks:
» Fix GMail Login Issues
» Control size of your GMail Inbox
» Generate GMail Signature Graphics
Subscribe in a reader
Download Free Google Software:
Reader Comments:
that is f'in lame. do you know how many e-mails i respond to a day? i dont want to paste my signature in each one.
this is dumb.
Clever and easy.
A definitive "what took so long to discover this" post.
Tell us when you will discover hot water. It would be interesting to know how long it's gonna take.
no! no! no!
no images in signatures!
no HTML emails!
just don't do this please!
Note also that many email progs (including Gmail) block external images by default making all that hard work in vain.
It's not really a signature if you have to manually add it each time.
I can't believe I read that whole thing just to discover that all Amit is saying is "drag and drop".
I want my ten seconds back.
What I would do is create a draft message with the signature and save that message. Now whenever I have to compose a new email with html/image signature, i would open the compose window by pressing Shift and Compose link to open it in a separate windows and then copy-paste stuff from the draft folder.
I know it's not the best approach and am personally not a big fan of fancy email signatures.
Wish I could give your 10 seconds back. :)
You're not really adding an inline image. You've just managed to get Gmail to insert an img tag referencing something on the net.
A true inline image is converted to base64 and added to the email body. It is referenced there (in the email itself) by the img tag in the HTML version of the email. The email stands on its own.
Also, the recipient needn't worry about "web bugs", because the image does not need a separate web hit to be shown.
By far, this was one of your lamest posts ever.
I'm irritated at myself for being misled by the headline. I've wanted to have the feedburner graphic as my signature since long, and thought there was some real solution.
Copy paste is common sense, my friend. Just that it is too goddamned tedious.
Hi Amit,
Your tutorial was useful, thank you.
Regardless of the criticism that others have left as comments, I appreciate what you wrote.
Thank you for sharing.
This was actually an awesome post..thnk u very much
Just can't believe you cant add rich text to your signature in gmail, that is what is lame.
Cheers for trying
Thanks you helped me out. everyone can complain all they want but copying and pasting takes the same time as clicking any built in feature.
Your article was helpful, some people juist like to whinge.
It's hard to do it manually every time :(
Boo Hoo ! This is a nice way for someone to brighten up an email. I found it helpful and so will others. Blah Blah Yakidee Shmakidee
I think this is not working now?
many thanks, been lookin for that!
I wouldn't recommend this approach. Namely, if you add an image tag pointing to an image somewhere on the web, there is at least 50-50 chance that the mail you send ends up in the recipients junk folder or never get to the recipient at all. All of the anti-spam softwares available today discard or flag emails as spam if the images are not ebmeded in the mail body.
Thanks it was very helpful, i didn't know till know how to arange it gmail (always looking for html view :) )
thanks a lot!
If you happen to use Gmail pop3 as I do, with thunderbird,I created html signature in thunderbird. Everything I send out using gmail smtp has all html formating.
Web based gmail will not support html signatures without work arounds such as this...
Thanks for the technique, Amit.
Your practice of composing a draft message and using that as a template is a useful way to compose message.
In fact, your thinking triggered quite a few other paths for solving my problem: templates for different audiences!
cool idea I guess ...I had the same problem, however need fast way to add html signature to gmail.
hmmmmmmmmm
Nice hack, actually.
I wrote a greasemonkey script to perform this action.
Problem Solved. No 10+ seconds wasted.
Read about it!
Install the script!
Thanks for the hack. Very simple and useful.
Guys, lets try not to criticise his work. At least he took the effort to share some knowledge. Useful to some, not to others... at least he shares.
Nice job Amit
One better solution seems to be here:
Use AOL/AIM for emails u want to send having pictures inline. This is the only webmail with full html support.
I never understood why people just don't delete hateful comments.
The organization that I work for was actually copying and pasting HTML signatures into emails; that is, until we found the Greasemonkey signature script on the Internet. The difference -- however -- between the script and copying and pasting is that the script "automatically" inserts the signature, so there is absolutely no manual process involved other than installing the script.
I've actually taken the concept a step further and created a Firefox Extension, which allows users to manage multiple HTML signatures in Gmail and inlcudes replies. That extension can be found here.
I must be an idiot, cuz I can't figure this out for gmail. I'm fairly new to the tech stuff, so go easy on me. I got it to publish to Google Pages, but now I can't get it to my gmail signature. Any help is appreciated. Here's the page: http://alexclark.googlepages.com/emailsignature
Good or bad, even Feedburner is directing its users to this post.
Check out http://www.feedburner.com/fb/a/headlineanimator/install?target=email&id=795310&w=1
Good to know that we could do that as feedburner itself is supporting ur blog :)
Nice attempt.. but dragging and dropping everything is :( bit difficult..
Oh my God!!! Here's another one... If you want you letters to look thicker just click on the B button of the Gmail text area;
I am being sarcastic in case your mind does not understand it...
This no longer works with the new gmail...you have to click on "Older Version" in the upper-right hand corner. Gmail has taken a step backwards. With the new version I can't even forward emails that already have images embedded in them. What were they thinking?
Firefox + GreaseMonkey + Gmail Signature Float> = Html signatures in Gmail.
Unfortunately the "New" Gmail breaks this code so you'll have to click for the "Old" version of Gmail.
Have a question? Need help? Visit the forums ».