Lecture 6: Image Optimization

In order for an image to be viewable on the web, it must be compressed (or exported, or optimized - same thing) from its original format. Most commonly, the file will be compressed to become a .gif or a .jpg.

GIF file format
GIF stands for Graphic Interchange Format. As its name implies, this file format was designed to compress graphics. You should use the GIF format for illustrations or logos that use limited colors. The more colors used in a GIF, the higher the file size. Once you go beyond 256 colors, the file size goes up dramatically. However, limited-color art compresses very well as a GIF. Some advantages to GIF's: you can make the background of a GIF transparent, adding versatility to that graphic by allowing it to be placed on different backgrounds. In addition, GIF's can be made into animations using ImageReady. If either transparency or animation is a requirement and you are working with a photograph, you would choose the GIF file format when you export.

JPG file format
JPG stands for Joint Photographic Experts Group. This file format can handle a range of colors, such as those found in a photograph, much better than a GIF, and will result in smaller file sizes. In addition to photos, any artwork that uses a gradient, or a has a very broad range of colors, should be optimized using JPG. Comparable looking GIF's can be several times larger in file size. JPG's should not be used for simple graphics with few colors, or large areas of solid color, because they will look somewhat degraded, and not as crisp as a GIF will. JPG's cannot be used for animations.

Dithering
"Dithering" happens when a monitor or video card cannot display a color, it attempts to simulate that color by combining two or more colors together, which results in a speckled sort of pattern. Dithering is not an issue for folks with modern monitors and video cards, which will allow over 16 million colors. See an example of what dithering looks like at: http://www.coastlink.com/users/sbryce/tips/old/tip9.htm

Web-safe color
There are 216 "web-safe" colors that are guaranteed not to dither regardless of monitor, video card, or platform. see: http://seurat.art.udel.edu/Site/InfoDocs/WebColor/WebColors.html

Hexidecimal Color System
The hexidecimal color system is the system we use for specifying colors for our web pages. It isn't exactly easy or straightforward to the non-math-oriented person, but fortunately the programs we are working with in this class will make it very easy to choose hexidecimal colors for our pages. The important thing to realize is that they are comprised of different combinations of Red, Green, and Blue (the only colors viewable on the Web). There are six digits total in a hexidecimal number, and it always begins with a # sign. The first two digits in the hexidecimal number represent red, the second two represent green, and the third pair represent blue. That's all you need to know about hexidecimal numbers for this class.