Create your own photo gallery: Part I

One of the greatest things about Web pages is the ability to display data on the Internet and have other people view it straight away. Take photographs, for example. In the not-so-distant past, sharing pictures with others would mean either posting them, or organising a time to meet in person.

In this and the next column (Create your own photo gallery: Part II) we look at the Net alternative: your own online image gallery, which will ensure your photos are only a click away.

Go to and you will see the template on which this project is based. This is what we will be creating in the next two months. First, we will look at the consequences of a graphic-intensive site and ways you can minimise the load time of your pages. We'll then consider the structure of the site. Next month's instalment will place increased emphasis on the code itself.

Friend or foe?

There is no doubt that photos will slow down your Web site. The more photos you display and the larger the file sizes, the longer your pages take to load and the greater the potential for dissatisfaction in visitors to your site.

To minimise this problem, ensure your graphics are optimised for the Internet. Resolution should be 72dpi (dots per inch), and as small in file size as possible without losing picture quality.

You can also consider using thumbnails to further reduce load time. These versions of your pictures are smaller in size, quality and file size. The intention is for the viewer to click on the thumbnail they want to see in more detail. The larger version of the photo (possibly with a description as well) will usually then display either in a new, pop-up window or in the framed format that we will be using.


Frames are Web sites in which multiple HTML pages display on one screen simultaneously, leaving the user with the impression that they are a single page. People often condemn frames, claiming they force the viewer to look at a Web page in a certain way. For our project, however, they are a godsend! Even with all we have done to minimise load time, the site is still going to be slower than desired due to our photos. Using frames helps us further minimise this problem.

With reference to, you will see that the format of our framed site includes four HTML display pages. There is also an index page behind the scenes that defines how these pages sit on the screen in relation to each other.

Click around this site and you will see that the ONLY page that changes is middle.html. The aim, therefore, is to insert the majority of your images into the static frames so they only have to load once. If you follow this course of action, all images will load when the site is first entered and then only the photo in the middle HTML page will need to load.

What do the different frames do?

hnav.html: this is simply an HTML page with a linkable title image allowing users to click back to the homepage. In this instance, instruction to the viewer is also included.
lnav.html, rnav.html: these files are very similar. They each contain four thumbnail images which, when clicked, will open the resulting pages in the target middle frame.
middle.html: when the Web site is first loaded, the file name is middle.html. However, each time a thumbnail is clicked, a different HTML file loads in its place. For example, if you click on the first picture on the left frame, then picture1.html will appear in the centre.

What now?

Take the time between now and the next instalment to prepare your images. Create two versions of each. In the site illustrated, small images measure 96x80 pixels and the large are 300x250 (width by height). You will need another large image for your homepage.

Join the newsletter!

Error: Please check your email address.
Rocket to Success - Your 10 Tips for Smarter ERP System Selection
Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Heidi Woof

PC World
Show Comments





Back To Business Guide

Click for more ›

Most Popular Reviews

Latest Articles


PCW Evaluation Team

Louise Coady

Brother MFC-L9570CDW Multifunction Printer

The printer was convenient, produced clear and vibrant images and was very easy to use

Edwina Hargreaves

WD My Cloud Home

I would recommend this device for families and small businesses who want one safe place to store all their important digital content and a way to easily share it with friends, family, business partners, or customers.

Walid Mikhael

Brother QL-820NWB Professional Label Printer

It’s easy to set up, it’s compact and quiet when printing and to top if off, the print quality is excellent. This is hands down the best printer I’ve used for printing labels.

Ben Ramsden

Sharp PN-40TC1 Huddle Board

Brainstorming, innovation, problem solving, and negotiation have all become much more productive and valuable if people can easily collaborate in real time with minimal friction.

Sarah Ieroianni

Brother QL-820NWB Professional Label Printer

The print quality also does not disappoint, it’s clear, bold, doesn’t smudge and the text is perfectly sized.

Ratchada Dunn

Sharp PN-40TC1 Huddle Board

The Huddle Board’s built in program; Sharp Touch Viewing software allows us to easily manipulate and edit our documents (jpegs and PDFs) all at the same time on the dashboard.

Featured Content

Product Launch Showcase

Latest Jobs

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?