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 PC World newsletter!

Error: Please check your email address.

Our Back to Business guide highlights the best products for you to boost your productivity at home, on the road, at the office, or in the classroom.

Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Heidi Woof

PC World
Show Comments

Cool Tech

Crucial Ballistix Elite 32GB Kit (4 x 8GB) DDR4-3000 UDIMM

Learn more >

Gadgets & Things

Lexar® Professional 1000x microSDHC™/microSDXC™ UHS-II cards

Learn more >

Family Friendly

Lexar® JumpDrive® S57 USB 3.0 flash drive 

Learn more >

Stocking Stuffer

Plox Star Wars Death Star Levitating Bluetooth Speaker

Learn more >

Christmas Gift Guide

Click for more ›

Most Popular Reviews

Latest News Articles


GGG Evaluation Team

Kathy Cassidy


First impression on unpacking the Q702 test unit was the solid feel and clean, minimalist styling.

Anthony Grifoni


For work use, Microsoft Word and Excel programs pre-installed on the device are adequate for preparing short documents.

Steph Mundell


The Fujitsu LifeBook UH574 allowed for great mobility without being obnoxiously heavy or clunky. Its twelve hours of battery life did not disappoint.

Andrew Mitsi


The screen was particularly good. It is bright and visible from most angles, however heat is an issue, particularly around the Windows button on the front, and on the back where the battery housing is located.

Simon Harriott


My first impression after unboxing the Q702 is that it is a nice looking unit. Styling is somewhat minimalist but very effective. The tablet part, once detached, has a nice weight, and no buttons or switches are located in awkward or intrusive positions.

Featured Content

Latest Jobs

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?