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!


Sign up to gain exclusive access to email subscriptions, event invitations, competitions, giveaways, and much more.

Membership is free, and your security and privacy remain protected. View our privacy policy before signing up.

Error: Please check your email address.
Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Heidi Woof

PC World
Show Comments

Most Popular Reviews

Latest Articles


PCW Evaluation Team

Tom Pope

Dynabook Portégé X30L-G

Ultimately this laptop has achieved everything I would hope for in a laptop for work, while fitting that into a form factor and weight that is remarkable.

Tom Sellers


This smart laptop was enjoyable to use and great to work on – creating content was super simple.

Lolita Wang


It really doesn’t get more “gaming laptop” than this.

Jack Jeffries


As the Maserati or BMW of laptops, it would fit perfectly in the hands of a professional needing firepower under the hood, sophistication and class on the surface, and gaming prowess (sports mode if you will) in between.

Taylor Carr


The MSI PS63 is an amazing laptop and I would definitely consider buying one in the future.

Christopher Low

Brother RJ-4230B

This small mobile printer is exactly what I need for invoicing and other jobs such as sending fellow tradesman details or step-by-step instructions that I can easily print off from my phone or the Web.

Featured Content

Product Launch Showcase

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?