Web Page Thumbnails

by Joe Gillespie — Jul 1, 2002

Often, you will want to show a small preview of a Web page to give a quick idea of what it looks like. If you have ever tried to do a screen-capture of a Web page and reduce in a graphics editor, you will be aware that can difficult to maintain quality. The process of reducing the screen down in size throws information away because the resampling averages adjacent pixels and they blur.

Although there is no magic formula for maintaining information in reduced images, there are ways to cut your losses.

First of all, you will need a screen capture program that can capture a whole page regardless of whether it all fits on the screen or not. SnagIt for Windows and ScreenCatcher for Mac both have such options and are more or less essential for this kind of work.

Having captured the browser window to a file, you will want to reduce it so that it fits into a regular Web page as a small JPEG, GIF or PNG image. If you resize it arbitrarily to a given dimension, you will probably end up with a distorted image. Instead, reduce it by exact integral amounts - a half, a quarter, an eighth, etc. You can try a third, fifth, sixth but be careful as these often produce rounding errors because of the decimal places involved.

Reducing your image by these amounts minimises the errors generated by such rounding errors and helps to maintain the integrity of any patterns or lines of text.

If you feel that the reduced image is too soft, you can sharpen it a little. Rather than applying the sharpening all at once to the final image, try reducing the image in steps and applying a lesser amount of sharpening at each stage. For instance, first reduce the image by 50%, then apply 50% unsharp masking. Reduce it by another 50% and give it another 50% unsharp masking, and so on until you achieve the desired size.

The choice for the final file format depends on the image. If there aren't too many colours, try using a GIF or PNG-8 image. JPEGs don't handle fine detail so well, but if the image has many colors or gradations, you might have to use a good quality/low compression JPEG image.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float