Untitled Document

Pictures can make a web page more interesting, visually attractive and appealing to the eye. The main drawback is the time it can take for images to load onto the page. Most web users tend to be an impatient lot, and if they have to wait for more than half a minute for a page to load, they will probably go elsewhere.

Two key points to saving images for your web page:

1. save the image the correct size.
2. keep it small.

If you are not sure what size the image needs to be, put an image on to your web page and resize it to fit the design. Click on the image then check in the properties box for the w and h values – these show the image size in pixels. Make a note of the sizes. You can now go back into Photoshop (or your chosen image editor) and save the image this size.

Remember to keep the images as small as necessary – the larger the size, the longer it will take to load. If you are creating a site with lots of images it may be best to have a page with thumbnail images (small postage stamp size images) which link to a larger version of the final image Consider other options such as black and white images (greyscale) which may load more quickly. A ‘low source’ image can be used under a large picture – this is a low resolution version of the image which will load and appear on the page before the final image appears – this can keep the viewer tempted to wait.

Save your images as jpeg, gif or png. Jpeg is often the best format for photographs as it keeps smooth transitions between different tones. Gif and png can be more pixelated (dotty). Use gif or png for clipart type images, gif and png formats allow you to select how many colours to use – the less colours the smaller the file size. Png can also include an alpha channel which saves tonal values for each colour. This can be an advantage for images where you require a transparent background.

Play around with the different image format types and you will soon find what works best for you. I use Photoshop to process my images because its save for web facility means you can play around with the settings, see what the image will look like and how long it will take to load before you save it. Photoshop elements is a cheaper version of the programme for those who need to buy a copy for home use and it does include the save for web tools.

Saving your images

Open Photoshop and bring in your image – File/Open browse to find the image and select Open.

If you need to alter the image first – ie crop, change tone or colour balance, add filters etc you can do this in photoshop first.

Once you are happy with your image select File/Save for Web, the Save for Web window will look like this:

In the preview window you will get a good impression of the size your image will appear on the web page. As you alter the image settings the preview image will alter to reflect these changes, The most important tools you will use are Image size, image type – if you are using gif or png you will tweak the number of colours and the colour table. If you are using jpeg format you will try altering the resolution settings – often there is little difference between high, medium and low.

On the bottom left of the window you will see the image size in kilobytes and how long this would take to load on a 28k modem (most people have at least a 56k modem now so you can half this time approximately).

Once you have entered the settings for size image type and quality, the image is ready to save. Click on the save button. Save the image in your image folder and give it a recognizable name.

If you are using thumbnails you will need to save a thumbnail version and a larger version of each image. It is often useful to keep a separate folder/s for thumbnail and full size images to make finding them simpler. If the thumbnails are going to be placed on a table you may find it useful to keep them all the same size for a pleasing layout.

Play around with the settings. 2 colour gifs can make dramatic graphic images and are also useful as a low source image. Remember when you use images on your page that alt text that describes the image can be useful for partially sighted users and may also be read by search engines. The text often appears before the image giving an idea of what to expect if it takes time to load.

I have found that saving the image the correct size and resolution will give you a web site that will load quite quickly even if you have fairly large images on your page.

Index Introduction Setting up Text Preparing images Adding images Tables Design/research More stuff Getting noticed Publishing your site Links