Placed in: Home arrow Useful arrow How to arrow HTML and images in your Gmail message
HTML and images in your Gmail message

Google's mailing service (Gmail) has a build in rich text formatter. The options of this text formatter are restricted. You can't add tables or images to your email.

HTML and images in Gmail

In this article I'll explain how you can add such images, tables etc. to your Gmail message. This way, you can give more attention to your email, making it better to read or to promote something. You simply have to add HTML to your email.

To get this effect, you'll only need any kind of WYSIWYG HTML editor. Examples of this can be Dreamwaever or Frontpage. Also online editors will work, like DevEdit, Google Pages or any other you can find. In this example, I'll be using online-html-editor.org.

Before we start, I recommend you to read A Guide to CSS Support in Email. As you can see, Gmail doesn't support a lot of CSS. So, if you want to make sure that this will work, exclude as much CSS as possible, making only use of HTML. Don't use "spacing", "margin" etc.

  1. First, make your email as you want it to look like. Now add your image to the editor by pressing the Image button. A new window will appear with several options. In the Source: field, enter the URL of your image. If you don't have a webhost on your own, you can use ImageShack to upload your images for free. Additionally, you can add a Title. Let the rest be as it is, only change the Border Style to "No Border" if you're going to use the image as an URL. Now press Insert to insert the image to your message.
    Gmail & HTML - Screen 1
  2. Now you can make a link from your image. Select the image (or text if you want to link it to another page) and press Hyperlink. This will also open up a new window where you can set some values. Set the Source to the page you want to link to. Set the Target to Blank. This will cause to open the URL in a new windows. You can also change the Title of the link. Press Insert if you want to embed the URL to your message.
    Gmail & HTML - Screen 2
  3. When you're all done with your email, select it all (Ctrl+A). Now Copy you message (Ctrl+C). Go to Gmail and compose a new message. Make sure you have Rich Formatting set to On. Now Paste (Ctrl+V) your message in the message box of Gmail. Now you should have your image in your Gmail with a URL to your website. You can check if your URL is working by holding "Ctrl" and clicking on the link.
    Gmail & HTML - Screen 3

There you have it, your own image in a Gmail message. Experiment on your own on what options are possible.

I want HTML in my signature

Even if your message can contain HTML, the standard signature doesn't allow rich formatting, therefore you can't "Copy-Paste" your HTML code there. Also, it's a lot of work copy-pasting your HTML signature in every email that you send.

There is a little workaround for this one, you'll just need Firefox as your browser and install the Better Gmail Add-on. This add-on has a lot of features, making it a really cool plugin.

When installed, go to Extra... > Better Gmail in Firefox. Go to the tab Compose and set Signature Settings: Float/HTML/No dashes on. Now press Ok to save the changes.

  1. Go to your favorite WYSIWYG editor and create your signature. I made one with a link to the RSS Feed of my website. Depending on your editor, you'll need to get the plain HTML code. On online-html-editor.org, you'll need to go to Save file now and open the downloaded file with Notepad. Select all the code between <body> and </body> and Copy (Ctrl+C) it. Make sure no style / span attributes are in your code.
    Gmail & HTML - Screen 4
  2. Now go to Settings on your Gmail page. Select the tab General and scroll down to Signature. Set the radio button from "No signature" to the radio button before the empty text field. If you have Better Gmail correctly installed, you should have the three checkboxes. Make sure you have the checkbox before Allow HTML in Signature set to On. Now paste (Ctrl+V) your code from the previous step in the signature text box. Scroll down and press Save changes to save. When now creating a new email, you should have a nice looking signature with HTML format.
    Gmail & HTML - Screen 5

Enjoy this knowledge. Cheer up your Gmail messages and promote your site or anything else more effective this way. Take a look at a complete list of HTML tags to make even cooler messages. Also take note of the possibility that the receiver of the message doesn't find the images / colors nice or cool, but finds it rather annoying. Don't overdue it.


Tags:  gmail useful how to email signature

Interested in this topic? You might enjoy another article I've written called

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to:
Digg!Reddit!Del.icio.us!Facebook!Technorati!StumbleUpon!Newsvine!Furl!Ma.gnolia!
Comments
Add NewSearchRSS
Gerard Espinas   2008-08-17 14:17:50
Gravatar image I just switch to gmail account and having difficulty in making html email signature until I saw your article. Thanks a lot!
Reply | Quote
Mitrabhanu   2009-02-06 16:07:37
Gravatar image Thnks for nice and useful post. I must use these tips to solve my html signature problem in gmail. Really this post is very innovative and informative. But the link to the firefox addon is not working and showing a 404 error page. How ever i found the url of that addon page which is " https://addons.mozilla.org/en-US/firefox/addon/4866 ".

Thanks
Reply | Quote
Syed - doesn't work for me   2009-03-02 15:00:15
Gravatar image Hi there, This sounded so lovely but I guess Google has changed the code. The add-on has also been updated. I tried this suggested one as well as Better Gmail2 but the rich text option does not show for signatures. Any suggestions?
Reply | Quote
anmari - fatal error   2009-03-12 00:44:39
Gravatar image hey marco,
I tried to click on your "60 useful items...." link at the bottom of this page and got this message:

Fatal error: Out of memory (allocated 5767168) (tried to allocate 88147 bytes) in /customers/marcofolio.net/marcofolio.net/httpd.www/mambots/content/socialbookmarkerbot.php on line 837
Reply | Quote
Akash - Not able to find such options   2009-03-18 08:08:19
Gravatar image hi,
I tried the same procedure what you have written but i could not find the options that you mentioned in extra compose .

Please advice..
Reply | Quote
Paul   2009-04-23 21:08:50
Gravatar image I too couldn't find the options you mentioned. Google must have changed their code.
Reply | Quote
Hesho   2009-04-24 00:08:43
Gravatar image :angry: :!: Please try to give me the steps in more straight forward and clear.
I had tried the predescroped stpes in order to make an image is my signature
1- I had uploaded the image into savefile.com
2-I had add the better gmail addon to my Firefox version 3.3
3-I had received an error from the fire fox but I chechked the bix to enable status in the compose tab in the tools dropmenu then go to better gamail then go to compose tab and check the signature setting
4- I had use the online-Html-editor.org as your mentioned
5- When I press on the image icon in the html editor, there is a pop up menu requires the address so I past the savefile link and then press on the save icon and there is a downloaded file .dat
6-I opened that .dat file by the notepad and copy all of its contents in the signature field in the settings of the general tab from the settings of my gmail account.
:woohoo: 7 BUT INVAIN
:whistle: 8 I am waiting for your comment
Reply | Quote
Marco - No ".dat"   2009-04-24 07:03:45
Gravatar image In step 5, you don't need to "save" anything (so you don't get the ".dat" file).

Simply, IN the editor, copy all the contents (by making sure the editor field is selected, go to "ctrl+a" > "ctrl+c" (copy)). Then in GMail, paste all the contents ("ctrl+v";).

Good luck!
Reply | Quote
Darius - Add image to body of letters   2009-10-21 14:35:26
Gravatar image go to Settings > Labs > Inserting images
Reply | Quote
Read more...
Name:
Email:
  Gravatar enabled.
Website:
Title:
UBBCode:
[b] [i] [u] [url] [quote] [code] [img] 
 
 
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch:
:(:shock::X:side::):P:unsure::woohoo::huh::whistle:;):s
:!::?::idea::arrow:
 
Unsubscribe from e-mail notifications.
 
< Prev   Next >
[ Back ]
Subscribe

If 3513 people are reading this site every day, why don't you?