#421: HOW TO POST IMAGES ON YOUR WEBSITE

I occasionally receive e-mails from people who are looking for simple instructions on how to put images into their posts and format them according to taste. It is ridiculous how difficult it can be to find straightforward directions for such a simple thing, so I've decided to write some up for you.

If any of these instructions are not as clear as they could be, please let me know so that I can fix them up.

Also, when copying any of the code shown here, please remember to delete the asterisks (*); otherwise, the code will not work.



Left Aligning an Image

<*img src="IMAGE URL" style="border:0px" align="left" alt="IMAGE DESCRIPTION" />

this is a woman's faceThis code will position the picture along the left margin, and the text immediately following the code will wrap around the image on the open side, like this. Paste the code in before the text, and immediately follow it with the text you want to wrap around the image. (You will notice that the text is sitting smack up against the edge of the picture. Keep reading to find out how to avoid that ugly event in "Putting a Border Around an Image").



Right Aligning an Image

<*img src="IMAGE URL" style="border:0px" align="right" alt="IMAGE DESCRIPTION" />

this is a woman's faceThis code will position the picture along the right margin, and the text immediately following the code will wrap around the image on the open side, like this. Paste the code in before the text, and immediately follow it with the text you want to wrap around the image.



Centring an Image

<*center><*img src="IMAGE URL" style="border:0px" align="" alt="IMAGE DESCRIPTION" /><*/center>

this is a woman's face
This code will center the picture, and the text immediately following the code will not wrap around the image on the open sides but will immediately follow below the image, like this.



Putting a Transparent or Colour Border Around an Image

<*img src="IMAGE URL" style="border:10px solid transparent" align="CHOOSE A LEFT OR RIGHT IMAGE ALIGNMENT" alt="IMAGE DESCRIPTION" />

or

<*center><*img src="IMAGE URL" style="border:10px solid transparent" align="" alt="IMAGE DESCRIPTION" /><*/center>

this is a woman's faceIf you are not using IE as your browser, this specific code will put a transparent border that is 10 pixels wide around your image. If you are using IE as your browser, the border will look the same colour as your text. This is a bug with IE. A better way to do this that works across all browsers is to replace "transparent" with your background colour, which in my case is #FFFFFF (white).

<*img src="IMAGE URL" style="border:10px solid #FFFFFF" align="CHOOSE A LEFT OR RIGHT ALIGNMENT OR LEAVE BLANK AND USE CENTER TAGS" alt="IMAGE DESCRIPTION" />

this is a woman's faceNo matter which browser you are using, this one works to imitate an invisible border. Now the text does not appear to crowd against the image it wraps around. The 10px border width can be made wider or narrower, and the color ("transparent" can be replaced by colour code, such as #808000) can be changed to anything you want, such as your background colour to create an invisible border to act as a margin for your text or a different colour to frame your image, as shown below.

this is a woman's face



Putting a Dashed or Dotted Border Around an Image

<*img src="IMAGE URL" style="border:5px dashed #808000" align="CHOOSE A LEFT OR RIGHT ALIGNMENT OR LEAVE BLANK AND USE CENTER TAGS" alt="IMAGE DESCRIPTION" />

this is a woman's face

<*img src="IMAGE URL" style="border:5px dotted #808000" align="CHOOSE A LEFT OR RIGHT ALIGNMENT OR LEAVE BLANK AND USE CENTER TAGS" alt="IMAGE DESCRIPTION" />

this is a woman's face

Elan Morgan12 Comments