How to present images effectively on your blog

by Heather Cowper on October 30, 2010

In the second article in my series on how to use images effectively on your blog I’ll be giving tips on how to present images in an attractive way for your readers so that they’ll want to stay longer on your blog and keep coming back for more. I’ll also be telling you how you can use alt tags and captions on your photos to make sure the search engines can find you more easily. You can read my first article on Why you need images for your blog

Uploading your images in WordPress

I know this is a bit back to basics, but it’s easy to forget the functionality that WordPress gives you to present your images in an attractive way, so let’s have a little play around;

uploading image in WordPress1. In your edit post screen, first click on the Add an Image icon to the right of Upload/Insert.

2. On the Add an image screen that pops up I always use the Browse an image option to find the photo wherever I’ve stored it on my computer

3. I browse to find the image, then press the upload button to upload the image which will then be stored in a folder on my hosting server.

4. Once the image has uploaded, you can choose the size and whether you want it left, right or centre as shown below. You can also add an alternative tag, Caption and description to the image at this stage which is recommended, but I’ll talk about this later. Once you’ve added whatever you want to your image, make sure you save your changes.

Chalet Florian nr ChamonixHere I’m using the image full size to the left

Chalet Florian nr Chamonix
And here I’m using the image full size to the right

More image functionality in WordPress

Next let’s explore the additional functionality that the latest versions of WordPress give you to make your images look interesting. You should be on the Visual rather than the HTML tab in your WordPress Edit Post screen

Editing image on wordpress1. Click on the  image that you’ve just uploaded and you’ll see some little icons appear. On the left is the Edit Image icon and on the right is the Delete image icon (see image right)

2. The delete icon will enable you to delete the image quickly and cleanly without leaving any bits of code floating behind the scenes. But now click on the Edit image icon.

3. In the Edit image tab that appears (see below) you can scale down the size of the image and change whether the image is left, right or centre. If you didn’t already add alternative text or a caption when you uploaded the photo you can do so now.

Using images on wordpress

4. Click on the Advanced setting tab (see below) and you can change the dimensions of the photo, add some white space around the photo and add a border if you want.

Using images on  wordpress

Here’s the same image with a border and some white space with text wrapped around it;

Chalet Florian nr ChamonixText Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
.

.How to resize your blog photos

I often also show images that are the full width of my blog area by uploading them the same way and then resizing them to the width that I want. There are a number of ways of resizing the photos on your blog;

1. If you just want to reduce the size of the photo, click on the photo as described above and then click on the small Edit Image icon that appears. In the Edit image tab, just adjust the 100% beside the photo image down to 80% or whatever % you want of the original size.

2. If you want to change the photo to make it larger, click on the photo as described above and then click on the small Edit Image icon that appears. In the Advanced Settings tab, change the dimensions of the photo(width and height) to the ones you want, keeping them in proportion (unless you want to intentionally distort the look of the photo)

3. If you are not using wordpress, or just want to do this resizing manually, go to the HTML tab on your Edit post screen. You can now view the code of the photo you are using – it will look something like this;

<a href=”http://www.mybloggingjourney.com/wp-content/uploads/2010/10/Chalet-Florian-nr-Chamonix3.jpg”><img title=”Chalet Florian nr Chamonix” src=”http://www.mybloggingjourney.com/wp-content/uploads/2010/10/Chalet-Florian-nr-Chamonix3.jpg” alt=”Chalet Florian nr Chamonix” width=”240″ height=”160″ /></a>

Where it says width=”240″ height=”160″, you can change the dimensions of the photo, for instance if I wanted to make the photos the full width of my blog post, which is 580 pixels wide, I would resize to width=”580″ height=”386″, keeping the height in proportion to my chosen width.

Using tables to present your images

I often use tables to present a couple of images side by side as in the example below.

On the terrace at Refuge de  Bellechat nr Chamonix On the terrace at Refuge de Bellechat nr Chamonix

You need to paste the following code into the HTML tab of your Edit Post screen;

<table><tbody>

<tr><td>photo</td><td>photo</td></tr>

</tbody></table>

If you wanted a block of 4 images presented 2 x 2 you would use the following code.

<table><tbody>

<tr><td>photo</td><td>photo</td></tr>

<tr><td>photo</td><td>photo</td></tr>

</tbody></table>

However don’t go too wild here with blocks of images as the more images you use, the slower the load time of your page may become. If you are after a collage effect, it’s better to use some editing software to achieve that and the resulting image will be a smaller file size than several photos in a table.

Now you need to insert the image link of your choice where it says photo. You can find the image link of an image that you have already uploaded by clicking on the add an image icon beside Upload/insert as before. Then click on Gallery and then Show, to expand the details of the photo. Then copy the image link you see in the Link url line and paste it to replace ‘photo’ in the table code above.

You will need to resize your images to the correct proportions to fit into the table as described above – I always use the width that is half the size of my blog post width (580pixels), so that two photos side by side will fill the full width of the blog post.

Using Alt tags and captions on your images

I’ve already mentioned above that you should be sure to add captions and alternative tags (also known as Alt tags) to your photos, but let me explain why this is so important.

When you take a photo it becomes identified by a number, something like P1230060. This will be used as the Title tag of your photo if you upload it to your blog without changing the number to a more descriptive title. When you hover over a photo the Title tag will show up.

The problem is that when a search engine looks at your photo the Title Tag of P1230060 gives no indication what the photos is about, so it will not show up in online searches relating to that subject. You can get around this by changing the Title tag of your image to something more descriptive, such as View of Mont Blanc above Chamonix, France.  Another option is to ensure that the Alternative or Alt tag has a description of the photo, as if the search engine finds nothing relevant in the Title tag, it will next look at the Alt tag for an alternative description of the image. For extra effect you should also add a caption which will show up below the image for the benefit of your readers to tell them what they are looking at.

Bedroom in Art'otel Budapest, Hungary

Bedroom in Art'otel Budapest, Hungary

Personally I ensure that all my images have a Title tag, Alternative tag  and Caption with a full description of the image and this ensures that over a period of time my images are regularly showing up in online searches and are drawing readers to my blog who should find that the content is relevant to them. The Title tag, Alt tag or Caption you use should be specific and contain relevant keywords that you believe people will be searching for.

For instance Bedroom at Art’otel Budapest in Hungary is likely to draw more searches to my blog  than a general caption like  Heather on holiday in the mountains.

Using alt tags routinely is also helpful to Visually impaired readers who use the alt tag to tell them what the picture is about.

You may also like to use the Title tag in creative ways with a more detailed description about the photo, as you can see if you hover over the image above.

If there’s one top SEO tip I would give about using images to enhance your blog’s traffic and Search Engine Ranking,  it would be to routinely give all your images a specific and descriptive Title tag, Alt tag or Caption.

Foxnomad has a useful article on How to Create and Use the Alt Attribute, so your articles can be indexed by search engines

That’s all for this article about how to present images on your blog for maximum effect, both to keep your readers interested and to attract Search engines to find your images and articles more easily.

In future articles I’ll be talking about using slide shows on your blog and how to resize your images to ensure your blog isn’t dragged down by long page load time.

There are useful tips on using images in WordPress here

Other articles about images

Why use  images on your blog?
How to use Flickr to enhance your blog

This article is originally published at My Blogging Journey
You’ll also find lots of great travel stories, videos and podcasts at our travel blog at Heather on her travels

Subscribe to My Blogging Journey Don’t miss out – subscribe to My Blogging Journey

Related Posts Plugin for WordPress, Blogger...
Save on hotels with HotelsCombined.com

Previous post:

Next post: