There has been a constant battle between your website’s downloading time and the quality of your images. Which is more important? Both! You need to keep your downloading time as low as possible while keeping your image quality as high as possible. How can you achieve this? Keep these three things in mind:

  1. Image Resolution
  2. Image Dimensions
  3. Image File size

Image Resolution (clarity): 72 dpi (dots per inch)  

Normally an image has a resolution of 300 dpi which is necessary for print.  A computer screen can only output 72 dpi and therefore loading an image with a higher resolution than 72 dpi is just a waste of space, bandwidth and time.  When you decrease the dpi to 72 you will see the file size of the image decrease dramatically without losing the quality of the image.  Just remember to save this as a copy of your image and not to overwrite your original image because once the dpi has been decreased to 72 you will not be able to get a good quality print of the image.  A good naming convention is to save the image with filename_WEB.jpg.  This way you know which one is optimised for WEB and which one is your original.

Image Dimensions: 1024 x 768 (landscape) 768 x 1024 (portrait)

You can make your dimensions anything you want but the above dimensions are standard for web.  It is big enough to show a nice size of the image and small enough to download fast.  Some other standard dimensions are 800x600 or 640x460.  Just remember to always keep the ratio of your image so that you don’t end up stretching or squashing your image.  Most resizing tools will have a tick box “keep dimensions”.  Make sure you have this ticked.

Image File size: Typically larger images should be between 60Kb and 300Kb and small images should be below 30Kb.

Editing tools for your images:

Picasa http://picasa.google.co.za/ or 

Paint http://windows.microsoft.com/en-za/windows-vista/open-paint or 
Photoshop http://www.photoshop.com/products


Free tools to use for resizing your pictures

For a PC user:

Fotosizer - Batch Image Resizer

This is a great tool to use because it is free, simple to use, and you can batch process images which can save you a lot of time.  Unfortunately this software is only available for PC and not for MAC users.  You can download the software onto your PC and can then use it without being connected to the internet.  They have documentation on how to download and use their software on their site

For a MAC user:

Preview application

This is already installed on your mac and easy to use.  Click here to see a step by step guide on YouTube that will show you how it works.

iPhoto application

This is also already installed on your mac and easy to use.  Click here to see a step by step guide that will show you how it works.