Optimizing GIFs (in Photoshop)
The Compuserve GIF89 format is one of the oldest extant electronic formats. My colleagues continually warn of it's impending demise—eclipsed by the PNG. It has yet to happen though.
The GIF file format has been the de facto internet graphics format since 1987. It basically renders image data through a 256 color look-up table (CLUT.) GIFs can also use one of the colors in the table for transparency and can also be "interlaced" so that the image renders in parts on the screen.
The ImageReady component of Photoshop will be used in the discussion below. Macromedia Fireworks 2 or later has a similar interface and claims to optimize better. Most other programs are either too clunky or difficult to configure, so using them in a heavy production environment is not recommended.
Save for Web
The "Save for Web" feature of Adobe Photoshop 5.5 and later is the greatest feature since layers came along in version 3! This new interface is so cool that it has since been introduced throughout the Adobe Creative Suite.
- No more exporting from your image editor, wondering what the outcome truly looks like.
- No need to launch into another application and navigate to the file in order to examine it.
- Now your original files remain untouched and you are guaranteed not to overwrite your hard work with a low-rez version.
With a complicated keystroke [Cmd+Opt+Shift+S(Mac)] or [Ctrl+Opt+Shift+S (Win)] you can leap right into the interface. You can even set up batch processing for an entire folder of images.
How to...
- Flat color graphics containing less than 256 colors make the best GIFs. If you want to optimize photographs or gradients, you'd best consider JPEG format. (Click here to see an example.) Actually, if a small GIF needs more than 64 colors, you should reconsider.
- The "selective" color pallet is most appropriate for modern
monitors and browsers. However, these considerations may also influence which pallet
you might want to use:
- For more detail in lighter colors, use Perceptual,
- For more detail in the red spectrum, use Adaptive.
- Dithering usually interferes with image compression. Avoid it.
- Transparency is quite quirky in Photoshop 6. Those who are used to exporting GIFs using the plug-in in older versions may be frustrated because the transparency has to be prepared in the Photoshop file before saving for web. Either start with a transparent background in your source file, or assign a matte color.
- Avoid Interlacing! What a dumb idea! No one has the patience to watch an image slowly gain focus on the web page. Besides, Transparency and Interlacing do not work together.
- The best method for quickly optimizing a GIF is to keep dropping colors until the image shifts, then popping back to the previous setting. To allow for anti-aliasing, keep at least 16 colors in your GIF.
©2004 MadMac Creations
All recommendations are to be used at the reader's discretion, and is subject to change without notice. While a best effort is made to test software and techniques provided, the reader is advised to test thoroughly prior to implementation. MadMac Creations takes no responsibility for any losses accrued, unless Tony MacFarlane has been contracted.
