In our last installment of Blogging for Expats, we learned how to add content to a WordPress blog. Today we’ll go ahead and add some eye candy.

Keep in mind that some WordPress themes require you to handle images a little differently, but this will work with the majority.

It’s very common to see two sizes of the same image in a blog post. When you view the post on a page by itself, you’ll see a large version, and when you see a page with a list of posts and brief excerpts, you’ll see a small image, or thumbnail.

Here’s an example of a page with thumbnail images.

WordPress calls the larger image and its thumbnail the Featured Image. WordPress handles the resizing for you, so you can use the same image for both.

You can add other images as well, but you’ll only have one Featured Image per post. In this post, it’s the big “W” WordPress logo.

Adding the Featured Image

Let’s walk through the steps to put a Featured Image in your post.

Choose an Image, and edit if necessary

Most of the pictures you see on websites are either jpg or png images. Generally they’ll give you the best quality while using the fewest resources. So if your image is a different format, convert it to either png or jpg.

While WordPress can resize the Featured Image to make two different sizes, before you upload that image you should make sure it’s only as large as the largest version you want to display.

The reason is that images use up a lot of bandwidth. If you want an image that’s 4″ wide and you upload a 10″image, your server actually processes the 10″ size even though it’s being displayed smaller. So if your pictures are too big, your pages will load very slowly and will discourage your readers and site visitors from hanging around.

I’m not going to get into image editing here — it’s way outside the scope of what we’re covering. If you go to this link, you’ll see a list of resources for that.

Upload the Featured Image

So, you’ve got your image, you’ve sized it properly, now let’s add it to the beginning of your blog post.

Open your WordPress dashboard, and go to the post you want to add the image to.

Position your cursor at the beginning of the post, and click the “Add an Image” button just above your editing window. It looks like this.

You’ll see a new window with four tabs at the top. You can add an image from your computer, from a URL, from the Gallery or from the Media Library.

We’ll add a file from your computer, so select that tab then click the “Select Files” button. Navigate to the image file you want and select it.

After a few seconds, you’ll see a screen that looks like this. Notice the title has already been filled in for you. Under the title are fields labeled Alternate Text, Caption, Description, Link URL, Alignment and Size.

Alternate Text

This is the word or brief phrase you see when you hover your mouse over the image. It’s important — Google uses it for search.

Caption

Self explanatory — if you want a caption for your picture, enter it here.

Description

This is also important for search. In the example shown here, I used the same phrase as I used in the Alternate Text, but normally you’d have more information in the description.

Link URL

If you want to link the image to another website, or a different page on your site, enter that URL here. Otherwise, your reader will just see a version of the image on its own page when they click on it. Or you can leave it blank and select “None” below, to have no link at all.

Alignment

Here’s where you choose whether you want your image on the left, center or right. Since we’re uploading a Featured Image, choose Left

Size

You have your choice of four sizes here, but since we’re inserting a Featured Image, we’ll stick with Full Size.

Use as Featured Image

Once you’ve finished all your selections, click the link that says Use as Featured Image. This tells WordPress you want to use this image in the post, and also as the thumbnail image that’s displayed along with the post excerpt.

Here’s where the difference in themes comes into play. With some (like Woo Themes), that’s all you have to do. With most others, like this Genesis Prose theme I’m using, you also must click the Insert into Post button. It’s important to select Use as Featured Image before you choose to Insert into Post.

Add a Little White Space

You’re almost done. Now you just need to give your image a little breathing room so it doesn’t butt right up against your text.

In your editing window, click on your image. It’ll turn blue and you’ll see two little icons on it — one’s a big “X” for delete, and the other will let you edit the image. Click to edit.

You’ll see two tabs at the top of the popup window, Edit Image and Advanced Settings. Select the Advanced Settings.

Scroll down until you get to Image Properties. You can add a border (I usually don’t), and add some space around the image. In the little boxes, fill in the number of pixels you want — I usually use 10. You can experiment to see what looks good to you, on your blog. Just type in the number for the vertical space and the horizontal space. They can be the same or different.

Click Update to save your changes, and you’re done.

This is Part 10 of Blogging for Expats, the tutorial series to help you with the basics of starting a WordPress blog to help support your overseas. You can find the previous tutorials here.

Do you have questions about adding images to your posts in WordPress? Feel free to leave a comment. . .