Many people, including me (when I started), make the mistake of uploading a large image and reducing it on the page. For instance, uploading an image that is 2500 pixels wide and then reducing it using the HTML code width="125px". It looks good on the page but, although it may seem fine, it is not. The browser still needs to load the file and then resize it to the parameters you set. Therefore, make sure you reduce the file to the size you are going to use on the page.

If you want to use the image in different sizes on a single page or on different pages, don't cut corners, create the right sized files and name them so that you can tell them apart. A file named example-image-250.jpg is then likely to be 250 pixels wide.

I know that there are many people who have a hard time when it comes to reducing the size of an image. In several graphical programs, I have seen that the end result of such an action can be terrible. Some details are blurred and there is no way you will want it on your web site.

You can see two examples of file resize action in the following images. It illustrates reduction to 250 pixels width image from a 1600 x 1200 pixels image. The first one is done using Jasc Paint Shop Pro 8.

The following one is done using the free-for-personal-use graphics program called IrfanView.

I know it is difficult to make out the difference once this is in print, try this yourself.IrfanView is superior when it comes to resizing and keeping images sharp, even the minute details. You can download the installation and plugin package from www.irfanview.com. Download and install that package as it offers some extra features that you might want to use. Resizing an image with IrfanView is very easy, just open the image in the program and choose resize from the menu option Image | Resize/Resample...

Then set the size you want using the set newsize option. With the option Preserve aspect ratio set, the height will be automatically calculated.

After you get it to the right size, save it as .jpg file. You can also use the option Save for Web... (PlugIn). It will give you some extra options to reduce the total size to an even lower value.

If you don't want to install IrfanView, or you are not on your own computer, you can use Smush.it—the image optimization tool available at http://developer.yahoo.com/yslow/smushit/. This can also be used through http://smush.it. This service lets you render a maximum of five images per session. With IrfanView you can work with batches of files.

There is a component called Content Optimizer, that you can try for image optimization on the fly—especially if you have a multi publisher web site. The component is available at http://extensions.joomla.org/extensions/site-management/cache/6427/details. Reviews show that it works fine. However, there is a drawback of working with this component. You can upload large images, and it will resize and store the images for you. This will use up your hosting space faster than if you were to resize them before you upload them.

For any web site, speed is really important as you get only one chance to create an impression. If that impression is poor because of the loading time of your pages, you lose! You lose your visitor and in the long run your ranking. This is because search engines see the visitors coming to your site and soon getting out to continue with their search. And that is not a good sign for what they thought was a good match…

One thing I do with images for a web site is look at the text and subject of the article. I then choose an image that fits with the content, resize it, and save the file with a different name. The previous image is called B1234xxx.jpg. If you are doing an article on vacation houses, you could save it with the name red-vacation-houses.jpg. If you write about a triangle roof design structure, call it example-triangle-roof-design.jpg.

Do you get the global idea behind this exercise? It is all about getting an extra keyword into the source code of the page. If you have your image's path open to search engines, you are more likely to get traffic for those keywords from image searchers as well. If you use the Joomlatwork patch, this is already done in the robots.txt file, that is replaced by the patch. If you want to open the path yourself remove the line:

Disallow: /images/

If you are placing the file on your web page, make sure you also incorporate the file size, that is, the real size and not an extra size reduction like you did before. For the following picture it is set to 468 x 180 pixels. The advantage of this setting is that these values are also in the source code that the browser gets.

Having the size means that the browser can reserve that space for the image and go ahead with showing the text as it waits for the image to arrive. If you don't set those sizes, you have to wait until the image is downloaded before the browser will get on with the rest of the document.

People can start reading the content immediately instead of waiting for the image to display before they can read the rest of the article.

If you look at the screenshot in the previous section, you see that the field Alternative Text is also used to get keywords into the page.

On some sites you may notice that they have only one word in the Alt attribute, or they have stuffed it with numerous keywords that they want to rank for. You should not use either of those options. Just write a fitting description, possibly with the same keywords that you used for the file name.

I also like to use the title tag, where I can just copy the Alternative Text into the Advisory Title field.

You can use the caption text, which is mostly displayed as text following the image to get keywords on the page. For this option the same things as mentioned earlier still apply—clear descriptions of the image and no keyword stuffing.