Smart Computing-Editorial

Guide Series

Buy This Issue
Table of Contents For This Issue


PC Security
August 2001• Vol.9 Issue 8 Page(s) 134-135 in print issue
How To . . . Create Thumbnail Images Share Your Photos Online Without Eating Up Lots Of Bandwidth

Jump to first occurrence of: [THUMBNAILS]

You’ve seen the sites: e-stores and online photo galleries that are so overwhelmed by graphics that they seem to bring out some sort of on-hold feature in your Internet connection. Photographs and other images on Web sites can not only create a positive user experience, but in many cases, such as with photo albums or art collections, they are an essential design element. Cramming dozens of bandwidth-busting pictures on a page, however, is a bad idea; try using thumbnail images instead.

Thumbnails are smaller versions of photographs and other images that people create and then usually link back to their original images. These smaller representations of larger images serve a couple of important purposes. For one, they let designers easily post many graphics that users can browse. Even more importantly, thumbnails give users more control over the size of pictures they view. With thumbnails, users can view only the small versions of pictures, saving bandwidth space and surfing time. Then when a user finds a picture she likes, she can click the thumbnail to view the full-sized image. Your users will thank you, and you’ll get extra points for efficient, effective Web design.

Manually Create Thumbnail Images. So thumbnails are a good thing, but how do you go about creating them? One way is to create and code them by hand. This method requires some form of a graphics program (we’re using Paint Shop Pro 6 in the following example, but you can replicate these techniques with many other graphics programs) and a willingness to play around with a little HTML (Hypertext Markup Language) code.

First, you’ll need to create the thumbnail. Open the picture you want to make a thumbnail of in Paint Shop Pro and choose Resize from the Image menu. You’ll see two resize options: resizing by pixel size or resizing by a percentage of the original. If you make an entry in the width box of either option, Paint Shop Pro will automatically fill in the height box and vice versa. This ensures that your image will stay proportional as you resize it.

With a graphics program such as Paint Shop Pro, you can create thumbnails by resizing pictures and saving them under a different name.

Note that resizing a graphic can make it blurry and result in a loss of detail, but this usually isn’t a big issue because thumbnails are used more to get a sense of picture content than detail. If it is an issue, cropping an image down to a representative portion of the whole will give you a thumbnail of higher quality.

Pixel or percentage? So, which is better, resizing your image using the pixel or percentage option? Most of the time, particularly if you have a number of images for which you’re creating thumbnails, reducing the images to a set pixel size will be the best way to go. Reducing by percentage will result in thumbnails of various sizes (depending on the size of each original image), while reducing both the height and width to a set pixel length will create a uniform look. Keeping all the thumbnails on a page to a uniform size looks better and makes them easier to browse.

The actual pixel length you’ll want to go with will vary depending on how large you want the thumbnail to be. (100 to 200 pixels makes for a nice-sized thumbnail.) Play around with a variety of numbers to find the right size. After selecting the size, click OK. Select Save As from the File menu and give your thumbnail a new name.

Link to the original. To create a link from the thumbnail to the original, large image, make sure the two images are in the same folder. Then insert the following line of code into your Web site where you want the thumbnail to appear (where your own file names replace biggraphic.jpg and smallgraphic.jpg):

<A HREF = “biggraphic .jpg”><IMG SRC = “smallgraphic.jpg” BORDER=”0”></A>

Now users will be able to click the thumbnail to open the larger image in another browser window. It’s a good idea to let users know, somewhere in the general area of the thumbnail, the size of the image that it leads to. This will give users more information when they are trying to decide if they want to click certain thumbnails to view the larger image.

Those with a little Web design experience may know that it is possible to tinker with specifications in the <IMG> tag to control how large images will appear in some browsers. This is not, however, an alternative for thumbnails. Browsers still load large images in their entirety and then just display them in reduced form. Because you pulled the large images into your browser cache first, this kind of defeats one of the primary benefits that thumbnails have going for them: bandwidth relief.

The Software Solution. Those who aren’t thrilled about getting down to the nitty-gritty of manually creating thumbnails for their Web site will be happy to know that there are many software solutions to expedite this chore. First, consider the HTML editor you’re currently using to build your Web site. Chances are good that, if you’re using a WYSIWYG (What You See Is What You Get) editor such as FrontPage or Dreamweaver, the ability to generate thumbnails and Web page coding is built right into the program.

For example, in Microsoft FrontPage 2000, you can easily generate a thumbnail without leaving the editor by selecting an image and clicking the Auto Thumbnailer button on the Picture toolbar. (Alternately, you can select the picture and use the keyboard shortcut CTRL-T.) FrontPage will then create a thumbnail and generate a hyperlink to the full-sized version of the image. You can change how FrontPage makes thumbnails (set the height or width, border size, whether to bevel the thumbnail, and more) by opening the Tools menu, selecting Page Options, and clicking the Auto Thumbnailer tab.

The following programs are some of the best solutions available in this area.

Web Thumbnailer. If you’re looking for a quick and easy way to process proportional thumbnails and crank out HTML code for them, try Web Thumbnailer. This DragonWorks Software program lets you select one or more images to work with. Large icons along the top of the work area let you generate code with a single mouse click, save images and thumbnails as JPEG (Joint Photographic Experts Group) or PNG (Portable Network graphics) files, arrange thumbnails in various ways, and more. You can set HTML table properties for borders, colors, background images, and font specifications, and the program’s built-in HTML editor lets you easily work with code.

Web Thumbnailer also offers a number of features that let you compress thumbnails (making them up to eight times smaller), select default browsers for viewing Web pages, and more. If you’re just looking for a quick way to whip out a simple page of thumbnails for the Web, Web Thumbnailer, at $11.95, is an excellent, low-cost choice. You can get more information on Web Thumbnailer (and download a demo for the application) at the DragonWorks Software Web site, http://www.majordomo.net/dragonworks/webthumb.htm.

AutographicsHTML gives you 32 different template styles to choose from, but you can create your own if you don’t see something you like here.

Web Album Creator. There are many reasons why you’d want to post photographs to the Web, but if you’re specifically looking to create a Web photo album, you should download Web Album Creator and put it through its paces. This application from Galleria Software lets you put together a photo album for the Web, complete with custom buttons, in five easy steps: select the images you want to use, choose a template and adjust any of the many configuration settings, select file names, generate the HTML code and thumbnails, and upload the files to a server via FTP (File Transfer Protocol).

Web Album Creator provides a variety of templates, such as bamboo and exam paper, for you to choose from, but if you don’t see something there you like, you can design and add your own. The entire program is highly customizable, so you can tinker with the color scheme, font, thumbnail sizes, hyperlinks, and much more. You can add labels to thumbnails, create contact sheets, and resequence thumbnails by simply dragging and dropping them. In addition to creating frame-based or nonframe-based pages, Web Album Creator also lets you make Web-based slide shows that let users choose the time interval for themselves.

This application supports a wide variety of graphics file formats, such as JPEG, GIF (graphics Interchange Format), BMP (bit map), PSP, TGA, PCX, and TIFF (Tagged Image File Format). It also comes in two flavors: a Pro version ($19.95) that is fully functional and includes a built-in FTP client and a free Lite version that has some limitations, such as fewer albums and no built-in FTP client. You can download Web Album Creator from http://www.galleriasoftware.com/webalbum/albinfo.htm.

AutographicsHTML. Another application that consistently receives high marks from Web-based software sites such as Tucows and The File Transit is AutographicsHTML from fCoder. AutographicsHTML uses a simple wizard to lead you step by step through the process of creating thumbnails and HTML and organizing hyperlinks. There are 32 styles to choose from, but if you can’t find what you want there, you can create your own, and you can easily view the Web site you’ve created before you upload it. This program offers a great way to create a unified, professional look for your photo Web pages.

The demo version of AutographicsHTML adds a watermark to saved images that stipulates that you are using an unregistered version of the software. Once you pay the $29 registration fee, this will disappear, and you’ll get the wallpaper utility BackFlip for free. You can find AutographicsHTML at http://www.fcodersoft.com/products/autograph.htm.

Thumb An Online Ride. Thumbnails are not difficult to create, and because many people still connect to the Internet through a dial-up modem, they are a perfect way to present your photos on the Web in a way that is both light on bandwidth and easy to browse.

by Rich Gray

Want more information about a topic you found of interest while reading this article? Type a word or phrase that identifies the topic and click "Search" to find relevant articles from within our editorial database.

Copyright & Legal Information Privacy Policy