Adding / Embedding signature with images in gmail

Creating a nice signature in gmail with graphics is cool but there are some tricks to get it to work. It is easy if you link the image source to some url, ie , <img src=”http://blarblar.com/my_pic.jpg”/>. To do that, design your signature in html and open it up locally in your browser. select the whole signature and copy it, then go to gmail -> settings -> general ->signature and paste your image in there. Unfortunately, you can’t type html in your gmail signature settings, else things would have been easier.

Embedding images in your signature instead of getting it from a http source is better because it doesn’t allow people to hotlink your image. To do that, go to gmail -> settings -> labs -> turn on canned response. Now create a base64 version of the images (just google around for some tools that you can use) used in the signature, your image tag will look like this <img src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUg…”/>. Again, design your signature in html and open up your signature your local browser, copy and paste the html in gmail. Send this mail to yourself. Now that you have receive this mail, forward it to yourself and you will get an option to create a new canned reponse from it. You have just created a signature template that you can insert in your mail in the future. Next time you reply a a mail, you will see a canned response option (a drop down icon on the lower right) for you to insert a saved signature, just insert the canned response after everything.

have fun.

Author: bpeh

Bernard Peh is a great passioner of web technologies and one of the co-founder of Sitecritic.net Website Design and Reviews. He works with experienced web designers and developers everyday, developing and designing commercial websites. He specialises mainly in SEO and PHP programming.