Tips for creatively using images

You've undoubtedly heard the saying "An image is worth a thousand words" many times. However, simply placing images on your website is not enough. You need to use images creatively.

In this month's Web development newsletter we give you some tips on how to use images on your website for maximum effect.

People

If you place a photo of a person on your website, you could flip the photo so that the person's eyes are looking towards important content of your site, not away from it. This is because visitors to your site will generally instinctively follow the gaze of a person they see in a photo. You can use this to your advantage; for example, by having someone looking towards a picture of a product you are selling.

Shapes of images

Images on your site do not necessarily need to be rectangular. You might like to try experimenting with different shapes such as ovals, triangles, crescents, stars etc. You will need to use image editing software to cut out unique shapes from images. If your image editing software supports layers, the easiest way to do this is to overlay a rectangle above the image so that the image is completely covered (the rectangle should be the same colour as your website's background). You can then exclude/cut-out the desired shape from the top layer. Parts of the photo will be visible through the area you have cut out, thereby changing the shape of the photo.

If your website has a textured background, you can make the area around the shape you cut out transparent and save the photo as a GIF image with transparency enabled.

Complementing images with whitespace

When using photos alongside text, a website can sometimes look cluttered. You can help prevent your website looking cluttered by surrounding images with whitespace (blank areas without content). Both the BestAddress HTML Editor and the Aurora Web Editor let you specify the amount of whitespace you want surrounding an image when you insert them by choosing 'Image' from the 'Insert' menu.

Wrapping text around images

You can wrap text around images using the BestAddress HTML Editor and the Aurora Web Editor by changing the 'Alignment' setting when you insert images from the 'Insert' menu.

Image dimensions

It is considered good Web design practice to not display full-sized images on websites. Large images unnecessarily use up your site's bandwidth as well as the bandwidth of your visitors, and result in your website taking longer to load. Large images can also detract from your website's design.

I you want to give visitors access to a full-sized image, the best solution is to let visitors click an image so that the full-sized image opens separately in a new window.

Images on professional websites will generally not exceed a maximum of 500 pixels on either side.

Cropping images to enhance appearance

In some cases you might have photos that do not look as nice as you would like. In some cases you can make an "average" photo look better by cropping it. Sometimes removing even small parts of a photo can make an otherwise dull photo look more interesting.

Image maps

Image maps are graphics containing clickable hyperlinked regions. Each region on the image map can link to a different webpage. If you want to create image maps for your site, you can use the Imagination Image Map Editor. The software can be downloaded from the following location: http://www.mmaus.com/download/imagination.html .

Royalty-free images for your website

The Aurora Web Editor contains a collection of royalty-free images that you can use on your websites. More images are constantly being added with each software update. You can download the Aurora Web Editor from http://www.AuroraWebEditor.com .