GIF Tips

or how to make good looking GIFs

About Image Resolution:

It is always best to scan a color image at 300 dpi and 16 million colors. This will create the most colors to choose from when converting your image from RGB to Index color. This may not seem important, but when you look at the examples below you will see what a difference it makes. It only takes a second to check and change the scanner set up if necessary. You will be rewarded for your time, and your viewers will be more pleased with the image they waited for.
Although the original scan may take up large amounts of memory (depending on the size of the image being scanned), once converted, it will be quite small by color image standards.

Here are some examples of scanning resolutions for you to compare. The file sizes range from 50 to 60K


300/256	300/24

72/256	72/24

About Index Color:

There are numerous software packages available that convert RGB images to Index colors. The best of them allow many conversion options. When changing an RGB image to Index color, you are doing two things: actually changing and removing the colors of the image map and color palette. The process takes your original scan of millions or thousands of colors and converts them to a 256 color palette. The software analyzes which colors should stay and which ones should go by dropping colors out of the original image's palette. In most cases, it decides which colors to keep by looking at the system color palette and using those as a guide. Often this creates a very nasty looking image out of what was a very nice image.
The best programs (Photoshop & DeBabelizer are two that we use) will allow you to sample the image and create a 256 color palette using the image's millions of colors. In most cases this gives much more pleasing results. In some cases, you will hardly notice the change at all.

Here is the same 300/24 image using the system palette instead of the images palette (adaptive in Photoshop). Compare the two.


(8 bit system 43k)	(8 bit Adaptive 60k)

About Dithering:

Dithering is the process of arranging the pixels to create the shades and colors on your screen when you are not using 24 bit color. In the early days, this was the only way to see the colors. Now 24 bit color is more common, and when you are using 8 bit color, the regular dither patterns are very obvious. Just switch your monitor to 256 colors or less and watch the patterns form.
Some of the new software packages allow for different types of dithering methods. Some are better than others. The best we have found is the diffusion pattern. This option scatters the pixels in a way the eye finds easier to blend.
This dithering option, in conjunction with 24 bit color and an adaptive index color palette, will (in most cases) give you a pleasing or at the very least, acceptable color of gray scale image.

Below are examples of non-dithered and diffusion dithered images.


Non Dithered	Diffusion Dithered

Dots Per Inch:

DPI is a way of describing how many pixels are displayed, scanned, or printed. Most monitor displays are 72 dpi. Most desktop scanners can scan 300, 600, and 1,200 dpi. Many laser or deskjet printers print 300 dpi and more. The image size increases as the dpi increases. When you are using images for desktop viewing, 72 dpi is the best way to go. Any more is a waste because you can not view more then 72 dpi on the screen.
Plan your page layout ahead of time. Know what size your image needs to be before you scan it. You may need to enlarge or reduce the image for your page. Better to do that at the scanning level. Planning ahead will save you time and disk space, and unnecessarily large images are memory hogs. Also, you can not add valuable information if it wasn't there in the first place.
For example, suppose you want to enlarge a small, previously scanned image that is 300 dpi. If you double its size, the image will then become 144 dpi and so on. If you continue the enlarging process, the image will become very blurry and the pixels will become very evident, creating an unpleasant image. Remember that in most cases, the screen resolution is 72 dpi. Anything over that is unnecessary for screen viewing (printing is another kettle of fish altogether). Anything less then 72 dpi will produce pixelization of your image and give that chunky bitmap look.

Below you will find two images. One was scanned at 300 dpi, the other was scanned at 72 dpi, both were enlarged by two. You can see a breakdown of the image in the 72dpi enlargement. It is now 36 dpi, less than your screen's 72dpi resolution. The 300 dpi image, although enlarged, has no noticible breakdown because it is now 144 dpi and still higher than your screen display.

300dpi enlarged

72dpi enlarged

If the printed image is important to you, knowing the printer's dpi and line screen are important factors for image dpi. You would not see the additional dpi on screen, but it would be there when the printer needed it, creating the best possible printed image. In most cases, a 72 dpi image is adequate on a PostScript printer (as long as the image is not enlarged). It's not publishing quality, it's but good enough for class instruction and referencing.

We have found Photoshop and Debabelizer do this type of conversion very well.

Other Useful Tips:

Choosing Your Image
When choosing images for Internet presentation, choose images that have fewer color jumps. Images that contain every color in the universe are harder to drop down to 256 colors because many colors may be lost. If for example, you scan an image of a green forest, you may have very little breakdown during the indexing process. But, if you have many reds, yellows, whites an flesh tones, a noticeable breakdown will occur.

Images From Printed Sources
Images from printed sources (non-photo or hand drawn/painted) are created using what are called halftone screens. Many times when you scan this type of image, the halftone screens will be picked up by the scanner, creating a Moire pattern on your scanned image. How they appear will depend on two things: The quality of the original image (high quality book, magazine or newspaper) and the quality of your scanner.
Using an image with a Moire pattern will be very distracting to the viewer. In addition to that, when converting to a GIF, the Moire pattern will create a lot of noise and thus a messy image.

There is a very easy step in Photoshop that can remove (in most cases) the Moire pattern. See Photoshop Tutorial for the process.

Image Size (how much window space)
Almost everyone wants images in their web pages. Most people hate waiting for very large images to down load.
We have found that an image should be no larger than 487 pixels wide. This size seems to work well for all platforms. This will keep your viewers from having to scroll from window to window to view your image, and it saves on downloading time. This will also keep your image from being printed on mutiple pages if your viewers want to print your page for later reference.

Binary or Raw data : which format should you use, and when?
If the image is scanned, manipulated, and marked up/tested, and has been saved as a GIF, you are ready to upload your image files. "Raw Data" is the format you need to use.
If you are just using the scanners in a site to scan your images and want to use the campus network to download them to your personal computer for manipulation at a later date, then "Binary" is your format of choice.

The Graphics Technology Cookbook text links
Digital cameras desktop video and sound	Web pages	Class handouts and PDF instructions	Images scanning and printing	Slides and presentations	Multimedia and Authoring	NewMedia User Web Site