Get More Traffic By Using Images

Did you know that you can get more traffic to your blog by using images?

The reason is that your images can show up in Google image search. Let’s say your blog is about hummingbirds (I don’t know why that word popped into my head). Someone searching for a picture of a hummingbird on Google image search will get a whole page of pictures of hummingbirds. If they click on one that they like, they will be sent to a page with Google’s thumbnail of the image on top, and the page where it appears on the bottom.

For a blog with a topic that lends itself to pictures, you can get a lot of visitors that way.

Here are some tips for using images:

Help Google Decide What The Image Is

• Use descriptive file names for your images.

  The first hummingbird photo I came across on the search above had a file name of broad_tailed_hummingbird.jpg. This helps Google to know what the image is about, a lot better than if it was named photo1234.jpg.

• Use the alt attribute on your images.

  The alt attribute is what determines the text that shows up when you hover your mouse over an image.

  Here is an example:

  <img src=”http://patdoyle.com/img/2007/09/ broad_tailed_hummingbird.jpg” width=”273″ height=”267″ alt=”Male Broad-tailed Hummingbird”>

  The alt=”Male Broad-tailed Hummingbird” is the alt attribute. (It is sometimes called the “alt tag”.)

  Be careful to make this descriptive and not too long. For blind readers, this is what gets read to them in place of the image. For people with images turned off, this is the text that they will see instead.

• Use captions or descriptive text near the image.

  Google also uses the text it finds near the image to help figure out what the image is about.

Tips For Quicker Page Loading With Images

• Use the width and height attributes on images.

  You can see the width and height attributes being used in the example above.

  This is not for Google’s benefit. This is to improve your page load time. If the browser knows the width and height of your image, it can leave room for it and continue loading your page while the image loads. Otherwise, the browser has to wait until the image loads before it knows how much room to leave for it, slowing the loading of the rest of the page.

  If you don’t know the width and height of your image, just right click on it and click on “Properties” (while it is shown in your browser). This will show you the dimensions of the image.

• Keep your image file sizes small.

  I like to keep mine under 20k. This is also for quicker page loading time. This is especially important if you have a lot of images on a page.

Improving The Effectiveness Of Your Images

• Use cute, unusual, or attractive images.

  These are more likely to be clicked on in the Google image search.

• Be clever in the keywords you use in your image file names, alt tags, and captions.

  Use keywords that will be searched for, but not too competitive. For me, this mostly happened by accident – guess I’m not that clever. It sure does help, though. I get a lot of traffic this way.

CSS Tricks to Style Your Images

To style your images, you will need to wrap your images in div tags, like this:

<div style=”___________”><img src=”http://patdoyle.com/img/2007/09/ broad_tailed_hummingbird.jpg” width=”273″ height=”267″ alt=”Male Broad-tailed Hummingbird”></div>

The </div> means “end of the <div>“.

You will replace the _________ in style=”_________” as follows:

style=”float:left;” This will put the image to the left of your text. Notice that the text is pretty close to the image.

style=”float:left;padding-right:20px;” This will put the image to the left of your text, and add 20 pixels of padding to the right of the image.

style=”float:right;padding-left:20px;” Same as above, but the image is on the right, and the padding is placed to the left of the image.

Creating a caption and a border (here is the whole thing): <div style=”float:left;padding:10px;border:1px solid #000000;”><img src=”http://patdoyle.com/img/2007/09/ broad_tailed_hummingbird.jpg” alt=”Male Broad-tailed Hummingbird” width=”87″ height=”86″><br>Broad-Tailed<br>Hummingbird</div> Broad-Tailed Hummingbird Note that <br> creates a line break. The border:1px solid #000000; creates a solid border of width 1 pixel and the color of the border is black (#000000 is black). The padding:10px; creates 10 pixels of padding between the border and whatever is inside the border.

One more example: <div style=”float:left;padding:10px;border:1px solid #000000;margin-right:20px;”><img src=”http://patdoyle.com/img/2007/09/ broad_tailed_hummingbird.jpg” alt=”Male Broad-tailed Hummingbird” width=”87″ height=”86″><br>Broad-Tailed<br>Hummingbird</div> Broad-Tailed Hummingbird This is the same as the example above, except that margin-right:20px; is added to give 20 pixels of space to the right, so that the text is not so close to the box with the image in it. I sometimes get confused between padding and margin. Think of what is between the <div> and </div> as being in a box. The border outlines the box. The padding is inside the box, and the margin is outside the box. If that didn’t make sense, then just play with it until it looks right.

If you are intimidated by the HTML and CSS above, rest assured, it’s not that bad. I did know HTML before I started blogging, but I did not know CSS. I taught it to myself by looking at what other people did and using the reference I will give you below. You can learn it too.

I just look up what I need in the references, and then do some trial-and-error experimentation. It really helps to be able to do some of this stuff. Just keep at it and you will learn.

Here are the two references I use:

1. HTML Reference or the same thing in alphabetical order (More general info.)
2. CSS Reference (More general info.)

Have fun!

- Pat Doyle