Too many times I see images that are too large in file size, dodgy quality or just plain bad photos. If you’re going to use photos make sure they’re good quality – not happy snaps. It really makes a difference. OK, so here are some tips on making sure you use the right types of images on your website.

File size
Remember, the larger the file size the longer it will take for a browser to download, and the longer your visitors will have to wait before they can see the image. Files for the web should be around 100Kb at the most. An exception to this is if you have photos that need to be large to show the quality or workmanship of a particular product (like an antique or a piece of woodwork, carving or painting).

Don’t be fooled into thinking that you can simply download a photo from your digital camera and add this to your site. Most cameras will produce a photo of around 5-6Mb in size. You will need to use photo manipulation software like Adobe Photoshop or Adobe Fireworks to compress the image and make it suitable for the web.

Note: Some content management systems allow you to reduce the size of images in their WYSIWYG (what you see is what you get) editors. Usually this does not change the file size, only the image size.

Image size
The image size is the size of the image on screen. This is typically measured in pixels. One pixel is equal to the dot in this i. Most photos I see on websites are too large. To see a great example of usage of small photos, simply go to nine msn or Yahoo! Their homepages have small photos that still allow you to see what is within the image.

As a rule of thumb, photos should be no bigger than 200 x 200 pixels. Please note this is only a general guideline and not a hard and fast rule. There are always exceptions.

Quality of images
It always amazes me how many people consider themselves to be great photographers. I bet if you asked them what thought needs to go into taking a great photo, many people wouldn’t know the things you need to take into consideration. If you’re going to take your own photos for your website, I highly recommend going to a few photography websites and brushing up on some photography skills.

Here are a few great sites:-
http://digital-photography-school.com/blog/
http://digitalphotography.tipcentral.net/
http://www.digital-photography-tips.net/
http://malektips.com/digital_cameras_help_and_tips.html

If you’re going to use stock photography, there are some great paid and free sites available on the net. One of the sites I use on a regular basis is www.sxc.hu.

The images and what they represent
I always tell people to not put images of your products on their website. I tell them to put images of their products being used or the essence of your product and what it’s about. I once had a dentist approach me about a website and wanted to have photos of his patients in the chair on his website.

Now… I’m not a rocket scientist, but even I know that no-one goes to the dentist for the joy of getting their teeth scraped and drilled (well perhaps there is a small percentage of the population who enjoy this!), but most people go to the dentist to get white, shiny, healthy-looking teeth.

Showing images of healthy, happy people with great teeth will mean more to the customer than a photo of the process. It’s the benefit they’re after, not the product or service. Sell the sizzle not the steak.

Apple iPods’ packaging is another great example. Their early packaging had images of musicians performing live on them. The iPod was about getting people back in touch with music… not to sell them a digital device.

If you want to see a great example of images and what not to do with them, heck out this great video .

Image file extensions and how to use them correctly
The file extension is the type of file your images are saved as. For example if you get an image called familyphoto.jpg then the file extension of this image is .jpg There are a few different file extensions when it comes to images on the web. Some of the more common file extensions you will come across are:-

• gif
• jpg or jpeg
• png
• bitmap or bmp
• eps
• psd
• tiff

Here’s a rundown of each file extension and what they mean:-

GIF
GIF stands for ‘Graphical Interface Format’. This type of format is best used for computer-generated images like logos and graphics.

JPEG
JPEG stands for ‘Joint Photographic Experts Group’. This format is best used for photos on the web. Do not use this format for logos or graphical images as they will turn out pixelated and look really ordinary.

PNG
Stands for ‘Portable Networks Graphic’. Not many people use pngs on websites, however they are very useful if you need an image with a transparent background.

BITMAP
Saving your image as a bitmap means that you will save the image as a series of dots or pixels. Jpeg and Gif formats are more common.

EPS
The EPS format is used mainly for print work. If you have an eps file you will need to convert it to a jpeg or gif for use on the web.

PSD
The psd format is a Photoshop file extension. If you have a PSD file you will need to convert it to a jpeg or gif for use on the web.

TIFF
The tiff format usually makes your images a higher resolution, so this file format is not great for the web.

So here are some helpful tips and hints for using the correct type of images on your website. If you have any questions, send an email to This e-mail address is being protected from spam bots, you need JavaScript enabled to view it .