|
As I started seriously doing work on the World Wide Web at home over a 9600 baud connection to my college campus, I discovered that a lot of graphics that really looked great on an SGI loaded painfully slowly into Netscape via modem. I decided then and there that in future web pages, I would include graphics that would (as much as possible) not significantly slow down the progress. The next page I had the opportunity to work on is one I use as an anchor resource for an Internet education class for primary and secondary school teachers, the IIT WWW Demonstration Page . I decided to use small 256 color phographic icons; after some experimentation I hit on 50X50 pixels as big enough to be seen but small enough to load "real fast". I used images from sources such as such as Corel PhotoCD and PCPaintbrush PhotoLibrary to ensure that there would be no copyright problems. I found that I could not just reduce an image; it would get very grainy and would not retain the detail as it got smaller. I then discovered, using the tried-and-true "trial and error" technique, that if you blur the image before reducing it, it will anti-alias itself such that it remains clear when the image is at a very small size. It's very tricky, because if you view any one of these images even at a 2:1 enlargement you can barely tell what it is! I used Paint Shop Pro, a shareware product running under Microsoft Windows, to adjust and reduce the images. It is very important when resizing bitmap graphics to use a product such as PSP which will resample an image rather that just resizing it. This means that pixels will be added or subtracted in in "intelligent" manner instead of the random way other means produce. Let's walk though a conversion... (I have linked the "bigger" graphics into
the page rather that placing them as inline graphics for the sake of speed.) The original
image of the Eiffel Tower was cropped to a pleasantly framed
square shape, 340X340 pixels. Next the color saturation was boosted by 40% (when images
are as small as 50X50 it is important to have intense colors), and then the contrast was
increased by 35%. The blur filter was then applied to the image ; then it was resampled to 50X50
pixels, and looked like this:. Once the image is reduced, the sharpen filter can then be applied to optimize details,
and the colors are reduced from the 16 million of a .jpg file to the 256 colors of a .gif
file. The end result looks like this: It may sound complicated but only takes a few minutes (and a reasonably good eye) to get good results. Here's an example of the importance of processing the image. This picture of a U.S. passport is just not quite right; I know that it should have a
blue cover. So I cropped it, increased the color saturation by 40%, and increased the RGB
blue value by 50%. Then I applied the soften filter, resampled the image, and applied the
sharpen filter, resulting in: Here's three more examples with the specific steps taken to get the resulting iconic image: Mount Rushmore: Gun: American Flag: Summary:The keys to success in the creation of these "teeny photo icons" are:
I did go a little crazy with this and have produced an entire library of these icons... Since I wrote this the folks at Raspberry Hill Publications have created a wonderful service called GIF Wizard which allows you to optimize GIF images by reducing the color palatte, and optimizing them for appropriate Netscape palattes as well. You can try it right here using GIF Wizard Direct; just fill out the form below with the URL of any GIF image and submit it!
Your comments and
questions are welcome. |
If I resampled without blurring it first, here's what I got: 
Still ok but not quite as effective...
Go to the HTML Writers Guild
homepage
