Preloaded images

You can pre-load images into the browser's cache memory so that when the user clicks on the next page the images will load straightaway. The instructions are held in a behaviour (preload images) on the first page. On this page the behaviour is held in the navigation menu. When the user moves to 'Test 2' the images on it load quickly.

Thumbnails and Thumbnail Grids

If you have a lot of images on a page it will take some time to load them all and it is likely that your user will not wait around. So you need to devise methods to speed up loading.

• Compress the graphics - see earlier
• Use thumbnails. These 100 *100 pixel images load fast but are small and therefore load fast. They give users an idea of what they want to open. When the user clicks on the desired image the full version loads. The thumbnail contains a hyperlink reference to the larger image which opens in a separate window. Alternatively the creator of the page can put both images in layers and use the 'show hide layers' behaviour to load the larger image.
• Look at this in action with the thumbnail below

Thumbnail Grid

A site with a lot of photos to view will organise a thumbnail grid. The user can look at small images before picking the one they want to view.
See this in action: Thumbnail Grid The pages are not difficult to make. Instructions are on the thumbnail page.

Dreamweaver has a routine to quickly build a thumbnail grid/photo album. However there is a restriction to using this as you must have FIREWORKS installed and working.

• Make a folder to hold your full sized images. These must be .gif, .jpg, .jpeg, .png, .tif, or .tiff
• In Dreamweaver pick Commands/Create Photo Album
• You will have the choice of entering a title for the show, a subheading and up to 2 lines of description
• Pick the folder containing the images
• Pick or create another blank folder to hold the files created. In this folder there will be several sub-folders. One contained .HTML pages containing the display images
• If you select Create navigation page for each photo the program puts in hyperlinks on each photo page.
• Click OK and sit back for your photo album to be made in Fireworks
• You can edit any of the pages created in the normal way.

See this in action This method is efficient but creates more files as each photo is on a separate HTML page.