Including images in blog posts can have a huge impact on how easy the post is on the eyes. It also provides a great opportunity to give illustrations to make your point or to let you show off something of interest. Have you ever tried to include a picture in a blog post and found out it’s a little more complicated than you realized? There are a few steps required, but they aren’t all that complicated . It takes just a small amount of HTML know-how!

There are plenty of resources available on HTML, but we are going to focus on the image part as related to a blog post. The first thing you need is an image to include. I’ll assume you know the image has to be hosted on a web server. If you don’t have them on your own hosted server, you can use services like Flickr or Photobucket to host the images. A couple of things to keep in mind:

• how the image relates to the content of the post
• the size of the image
• the placement of the image in your post

The first part of that should be the easy part. The image should be related to the content or provide some type of illustration. The second part to keep in mind, is the image size that will work best with your content. To resize images, I like to use a program that is free for non-commercial use called Photo Filtre……and no, I didn’t mis-spell “filter”. The program was written by someone in France. With Photo Filtre, it’s easy to resize images and add enhancements, such as drop shadow and a variety of other enhancements, that will make photos stand out much better. Their are plenty of other image-editing programs available as well. The third part is the position in your blog post where you want the image to be. This is the part we are going to focus on for now.

A Small Lesson in HTML

If you are unfamiliar with HTML, it’s an acronym for Hyper Text Mark-up Language. Basically, it’s a code which is used to communicate with a browser what images to display, as well as where it is to display those images in relation to the text it has to display. Here’s an example of the code used for the “photo” to the right.

In the example, you’ll notice the < > brackets which open and close the “code”. The “img” indicates to the browser that this is an image. The “src” which stands for source tells the browser where to pull the image from…….or where the image is hosted. The “width” and the “height” dictate the size and shape that the image will be displayed. The “alt” tag which stands for alternate provides alternate text for the browser to display in place of the image if the image can’t be displayed for whatever reason.

The “hspace” and “vspace” characters, also known as horizontal space and vertical space, address how much space should be left between the image and text. If these characters are not included in the code, there will be no spacing between the image and text. Last, but not least, is the “align” tag. This tag tells the browser where to display the image in relation to the space the browser has to work with. In the example above, the alignment is to the right, if I change that tag to the left, the image would be displayed on the left. Another option is to align the image to the “center”. This works well for larger images that are too wide to wrap your text around, such as the image below.

As you can see, this really isn’t so complicated afterall. It’s very important, however, that this code is typed out properly or the image will not display correctly. It gets even easier if you use a WordPress theme like one of my themes or Cutline, that comes with some of these “tags” already worked in to the theme. At the site for Cutline is a whole article on exactly how to handle your images with that particular theme.

Conclusion

Folks, that’s about all there is to it. There are other tags which can be used to add borders and then there are many ways to enhance your images using an image-editing program, but this post covers the basics of how to get your images positioned where you want them. I hope this has been helpful.