Using Images In Your Posts: Techniques

Using Images In Your Posts: Techniques

In my previous post on this topic, Using Images In Your Posts: Sources, I covered sources for images.

In this article, I’ll be covering three techniques you can use to get the most out of the pictures you find. Finding the picture is only part of the story, you have to get it to work well within your article to help drive the story home with the reader and to catch the eye of the casual viewer.

Blending an Image with Your Content

Stop Looking!One of the effective ways to include an image in your article is to blend it with your text. For example, in this paragraph you see the road workman with the stop sign on the right. This kind of picture lets the reader who’s scanning infer that this part of the text might be important.

Such an image can also be used to give or reinforce a particular feel for a section. For example, if I wanted to enhance part of an article where I was angry about something, I might display a picture of a person who was angry. Or, if I wanted to give a paragraph an emphasis on technology, I might use a retro looking computer room picture.

Blending images with text is easy in the WordPress visual editor. Just click on the image pop-up and select Left or Right from the Alignment dropdown and the picture you select will be placed accordingly. Also, it’s good to give a little margin to the picture so you may want give it about 5 pixels of space both vertically and horizontally as seen in this screen shot.

WordPress Image Dialog Example

If you want to use HTML code you can do it like this.

<img src=’http://optempo.com/wp-content/uploads/2007/12/roadworker.png’
alt=’Stop Looking’ vspace=’5′ hspace=’5′ align=’left’ />

or like this

<img src=’http://optempo.com/wp-content/uploads/2007/12/roadworker.png’
alt=’Stop Looking’ style=”margin: 5px;” align=’left’ />

Of course there are a lot more things you can do with CSS (Cascading Style Sheets) but that goes beyond what I’ll be covering here.

Using an Image as a Divider

Another common use of pictures in post is to have one as a divider between sections of text, as almost a chapter divider.

For example, let’s say that there’s an article where we begin with a light, humorous tone but we want to switch to a more somber tone to get serious. We might use a divider picture like this to swap tones.

Somber Tombs

This helps the reader switch gears mentally for your change in direction.

With this kind of picture it’s not shown mixed with the text and you would usually use a larger picture that fit across most, if not all, of your content area. You could also use the <center> element to center the image as I’m doing here.

Fun with Alt Tags

This is the Alt TagAnother thing that you can use with your images is the Alt tag. This tag is intended to convey image information to persons who require an audio browser. It also can be used for SEO purposes for Google Image Search since this part of what they use to determine the relevance of an image. You can also use it to convey a hidden message to readers who hover over it.

Some browsers use the alt tag as a tooltip while other browsers use the title tag for this purpose. Who’s right? Who cares? If you want all of your audience to see the tooltip use the same text in both tags. You could even use different text in the tags if you wanted. Hover over the ‘whisper’ picture to see which your browser uses.

Final Thoughts

Remember that a lot of the ways you use images can also be applied to how you show advertising blocks in your text. It can be effective to combine both regular images and advertising images within your articles although, if you do this, it’s best to have a high relevance between the ad and the article.

Do you have any thoughts on using images in your articles? Any questions? Just leave a comment if you do.

Editors Note: This is the 300th post on OpTempo since it was started on October 6, 2007

 


RSS feed | Trackback URI

11 Comments »

Comment by Louie
2007-12-18 01:36:59

Very well said. :). I usually use the blending technique for small images and use the image as divider for shorter images.

Comment by jfc
2007-12-18 09:32:39

Thanks for stopping by Louie. You use graphics well on your site.

 
 
2007-12-18 03:59:39

Nice article. Had you used my 2nd to last Entrecard article as an example, it would have trebled your credibility. ;-)

Seriously, it is a good article. It can easily be taken for granted that people somewhat know this stuff but it’s amazing how many really don’t.

Sam

Comment by jfc
2007-12-18 09:34:38

Thanks Sam,

I liked your used car salesman picture on that post.

 
 
Comment by costa
2007-12-18 04:59:51

Yea. I have to add this. Never use a photo with a watermark on it! I got bombarded once for it and learned my lesson well. LOL. :-( but the water mark was hardly visible that I did not notice it until I got spanked.

Comment by jfc
2007-12-18 09:38:53

Hi Costa,

I had mentioned that in my previous post on images.

I don’t watermark the images I use here unless they’re personal photos. I did do a lot of watermarking when I was selling stuff on eBay. You almost have to do it there.

 
 
Comment by Lin
2007-12-20 17:10:31

Thanks for responding so promptly to my email Frank! I’ll definitely have to tinker with this a bit and see if I can’t get my images to wrap around the text right.

So much to learn with Wordpress! :)

Comment by jfc
2007-12-20 17:46:15

Glad to have helped Lin.

With the 3 column, content in center, theme you’re using, centering larger pictures will probably work best. Unless you scale the pictures down to about 100×100 the text may be a little too tightly spaced and look a bit odd.

 
 
2008-01-27 21:55:08

[…] this week with a post providing various tips and tricks. Check out the other two entries — techniques and sources — for the full picture, no pun […]

 
Comment by julianne wells
2008-07-16 08:38:01

this post was very helpful. i started using these techniques to display photos on my new blog and it looks much better. thank you.

 
2008-08-12 11:26:29

I am getting ready to add graphics to my dull and boring blog, so this information is very handy. You explain things very well. Thanks!

 
Name (required)
E-mail (required - never shown publicly)
A Link To Your Site
Your Comment (smaller size | larger size)
You may use <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> in your comment. Comments with links are automatically moderated but are normally allowed after review. New commentators are automatically moderated. You may use anchored text in your signature link as long as your comment is meaningful and on topic. Signature links inside of the comment body are not allowed.

 

Some graphics Copyright 2005 Riverdeep Interactive Learning Limited, and its licensors. All rights reserved
Some graphics Copyright 2005 Cosmi Corporation, and its licensors. All rights reserved.
All graphics are intended for viewing purposes only.

Directory of General Blogs Personal blogs Top Blogs Marketing SEO blogs blogoriffic.com Webfeed (RSS/ATOM/RDF) registered at http://www.feeds4all.com BRDTracker blog directory