How to Thumbnail in Publisher Web Publications

applies to version 2003 and 2002 - version 2002 users disregard the sections on Picture Optimization

Thumbnailing is very common in web design and is a very simple design technique easily implemented. Simple though it is, it is one of the most frequently asked Help requests in the Microsoft Community for Microsoft Publisher. In response to that this article will illustrate the concept of thumbnailing, as well as take this opportunity to demonstrate the Picture Optimizer tool introduced in Publisher 2003 Service Pack 1.

What is Thumbnailing?

Well what it is not is something magical or difficult. It is a concept of hyperlinking a small version of an image to a larger version of an image. The technique became popular in the early days of the web mainly due to download speeds available at the time. It could take a long time to download a full size jpeg image file on a page. So rather then display the full image on a web page it became a popular concept to display a smaller copy on the page and then hyperlink that to the full size image. Thereby providing the image to the site visitor faster, albeit smaller, while offering them the flexibility to choose the option of viewing the full size original image file. Typically this is implemented in a "gallery" fashion, where several images are to be on display.

Before you implement thumbnailing you might consider your target audience, with the growth of broadband and higher download speeds today, larger graphics of higher quality can be used with little difference in download time. Keep in mind thumbnailing by its very nature is adding additional mouse clicks to the site visitor. If over-used it may make the use of the site to time-consuming. Instead of a gallery of thumbnails you can consider running the gallery as a series of pages with one or two images per page.

What is the Picture Optimizer Tool for Publisher 2003?

Well, first some background. Publisher 2003 is designed to provide a richer graphic experience in web publications (keep in mind todays higher download speeds). In part by using newer image formats such as PNG, and technology like VML. Both exploit the power of Internet Explorer 6 (and newer). Then also in part, by retaining the quality of the image the customer inserts into the web publication, during the generation of the web site files.

Image quality, image resolution, and terms such as "DPI", are outside the scope of this article so you are encouraged to research that topic independently. However it is helpful to know that Publisher versions prior to version 2003 would "down-grade" the customers image to a suitable web resolution when making a copy of the image in the web site generation. The smaller resolution translates into a smaller file size which translates into a faster download time. The more images that are on a web page, the more download time increases. The more resolution of such images decreases as well as overall image size, the more download time decreases.

It is the burden of the web designer to balance image resolution, image size, and number of images, in an effort to provide the best experience for the site visitor.

That said, Publisher 2003 does not "down-grade" the customers image. If the customer inserts a 400 dpi image then the web site copy of that image that Publisher generates in the web site files will retain that quality. Actually Publisher 2003 makes multiple copies of the image in various formats and qualities designed to target various browsers, this article doesn't have time to wander off on that topic. But that covers the background details.

In response to strong feedback from Microsoft's Publisher MVP's and customer experiences, Service Pack 1 introduced a Picture Optimizer tool on the Publisher 2003 Picture toolbar. This tool provides the customer the option of "down-grading" their inserted image. This is done prior to the web site generation. On a side note, in my opinion a customer should use a graphics tool to reduce the resolution of their image and to resize it in the dimensions wanted for the web page, - before - they insert that image in the Publisher web publication. In lieu of that the Picture Optimizer tool is a must.

If you have not yet downloaded Service Pack 1 and updated your Publisher 2003, please do so. The Service Pack link is available at http://office.microsoft.com.

Next launch Publisher 2003, open a web publication, have your image(s) close by, and we'll proceed with thumbnailing.

Thumbnailing

Using Insert, Picture, From File..., browse to the image file you want to place on the web publication page. The image is placed on the page and the Picture Toolbar appears. On the toolbar click the Compress Pictures tool button (requires SP1). The compression dialog will pop-up on the page, which is self-explanatory. For this example I will click on "Selected pictures", "Web/Screen", and leave the Options as checked. Then click OK to accept, apply, and close the dialog. I then close the Picture Toolbar. Then select the image and grab one of the points on the outline and resize the image to the desired size and spot it on the page layout as desired. This is the "thumbnail". You can resize this to any size you desire and whatever looks best in your page layout, but if you want some guideline, then I'll mention that the common design practice is to size thumbnails at 100 pixels by 100 pixels. You can use the pixel rulers on the publication to size accordingly.

To make the thumbnail functional we need something to hyperlink it to. This means that our full size image file needs to be on the web server. Uploading a file to your web server and upload protocols are outside the scope of this article. Connect to your web server using your preferred method, be it the host file manager, an ftp client, or http web folders in Windows XP, and upload the image file to your web space.

As a side note, before you upload the file you should use a proper file naming convention, refer to my web site advice article for details. Additionally for organization I recommend you first create a directory on your web server called "images". That folder will be the location you upload your full size image to. Meaning your uploaded image file would have an address path on your server that looks like this - www.yourdomainame.com/images/yourpic.jpg

That address is the files URL. You need to know your files URL in order to hyperlink the thumbnail to your file. So make sure you know it, write it down if need be or copy it to your Windows clipboard. In fact take a moment to verify you have the URL correct, open a browser window, paste the URL or type it in the address bar, and press Enter. If the image file loads in your browser window then you have the URL correct. If you load a 404 error, page not found, in the browser window then you have the URL incorrect (back up and review your work).

That image in the browser window is just what you will see when we finish the thumbnailing steps. Select and copy that URL in the address bar and go back to your Publisher web publication. Do a right click on the image (thumbnail) and select hyperlink. The hyperlink dialog then appears. On the Link To menu select the "Existing file or web page" option. In the address box paste your URL. Click OK.

Hover your mouse cursor over the image for a moment and a tool tip will appear that will display the URL the image is linked to. If it looks correct then press the ctrl key and click and verify that the link opens your browser to your file.

That's it. There is nothing mysterious about thumbnailing. Afterwards you publish your Publisher web publication. For proper Publisher web publication publishing (uploading), refer to my publishing articles.

For future help in your web design efforts with Publisher visit our forum at Publisher Community.