Creating an HTML Thumbnail Gallery

A very common request is to create a page of thumbnails for a website with links to full-sized images. Irfan View will do this very quickly and easily, with a reasonable degree of control over the output.

After creating the HTML page you must link it into your website. I suggest creating a separate folder on your hard drive to hold all the files created by Irfan View, then link to the index.html from your web design program. If you link to the file on your hard drive, the web program should upload index.html and all linked files to the appropriate folder for you. This will depend on the web-publishing program that you use, so it is beyond the scope of this tutorial.

1. Open Irfan View, and select Thumbnails from the File Menu (or press T)

2. Browse to the folder where you keep the pictures you want to display on your website.

3. Select the images you wish to use with control click, or select a range of images with shift click, then select "Save selected thumbs as HTML file" from the file menu.

4. From the dialogue box that appears you can browse your hard disk to the folder where you wish to save the results. I have used C:\TEMP but I recommend creating one beforehand where you keep other files for your website.

5. Choose other options such as the number of columns of thumbnails and the title of the HTML Page.

Irfan view has many options to include image information. Here, the IPTC Caption ($I120), image width ($W), height ($H), and size ($S) are used. If your JPG images are annotated with comments and captions (IPTC info) you can include that in the file "Write info/text" field instead of simple file properties information.  Camera settings (Exif) information can also be included. Click the help button from this dialogue box in Irfan View for details. There are too many options to list.

6. Click on "Export" to create your HTML page and the thumbnails. Irfan View does all the hard work for you.

7. In Explorer, you can see the files that have been exported.

There is a file and a thumbnail for each picture. Index.html links them all together.

8. Double-click on index.html to open it in your browser.

9. The thumbnails are displayed with the file information under each one.

Click on any thumbnail to open the large image.

10. The HTML page for each picture has the same layout. The picture has a title of its file name, and the page has links to previous and next pictures, plus a link back to the thumbnails page. I have resized the browser window for this illustration to suit the page format of this tutorial.

The thumbnail caption is again shown under each larger image.

I recommend resizing all images to the same vertical height to fit the browser window (about 600 pixels) before making the HTML thumbnail gallery.

10. If the image is of portrait format it may be too tall for your webpage.

It is up to you to resize the pictures carefully to fit the design before you start work, otherwise the user will have to scroll down to reach the thumbnails link, which is not very good design. If the picture is the right height and width, no scrollbars are shown and the user can easily return to the thumbnails page by clicking on the bottom link.

See how quick it was to create that page with four pictures. Just imagine how much time you would save if you wanted to display fifty or a hundred thumbnails, each linked to a larger picture.