More About Color - GIF's |
||||||
|
Computers monitors are like TV screens. The screen is coated with lots of tiny dots of phosphorus or other chemical that glows when an electron hits it. These bits are called Pixels, and each is actually made up of three dots, one each of red, green and blue. There's a Cathode Ray gun at the back of the tube that spits out electrons really really quickly in the right pattern to make your screen light up and show you Julia Roberts kissing Richard Gere or your word processor. The number of lines and columns of dots is called "resolution" or "screen size", and the number of Dots Per Inch is referred to as "dpi", or sometimes also "resolution", which can be confusing. TV's normally have 512 lines, though the new HDTV has 1024. Computer monitors range from 640x480 (that is, 480 lines of 640 pixels each) to 1600x1200, with 800x600 being the most common at the moment. Monitors made for PC's have a standard resolution of 72 dpi, while Mac monitors have 96 dpi. This isn't the actual number of pixels it takes to fill an inch of the screen, it's an average standard based on the most common hardware and software. The important thing is that when creating images or graphics for display on the Web, you don't need a resolution any higher than 72 dpi. Images saved at higher resolutions just waste space, and make for much larger file sizes. There are two ways for computers to handle images: Bitmapped and Vector. Vector images are comprised of a set of mathematical equations telling the software how to draw and color various shapes on the screen. The equation for a square is simple, requiring only definition of four points and info on how to fill it. Curves and circles are just as simple, and even much more complex shapes can be reduced to combinations of other shapes. This type of image works very well for line drawings and graphics, and can even be used for photos by high-end graphics software. However, since this format is much more precise, it requires much more data and larger files. There are only a few very specialized reasons to use a vector graphic on the web, and even then they must be first translated into binary data. Bitmapped images are comprised of a string of data that tells the computer how to activate each pixel on the screen, how much of each color to use, and how bright it should be. Both gif and jpg are bitmap formats, and they'll be the only image formats you use, unless you get into pdf's. Early monitors were monochrome, black/white. So each pixel only required one bit of data to describe its color - on or off. With color monitors, each pixel needs more. VGA was one of the first color display formats, it could handle 8-bit color. That is, each pixel got 8 bits of data to describe it. 8 bits in binary can have 256 combinations. Modern monitors can handle up to 32-bit color. This is referred to as "color depth". JPG's can handle any level of color depth, gif's only go up to 8 bits. But those 256 colors can be *any* 256 colors. One thing that gifs allow you to do is take advantage of color depth. When you save an image as a gif the first step is to convert it into "indexed color". The graphics software, such as Photoshop or PaintShop Pro, looks at the image and indexes the colors, reducing them to 256 if need be, and giving each one a number. This info is placed at the beginning of the image file, sort of a directory or table of contents. The rest of the image is compressed by recording that there are x numbers of pixels in this color, then x pixels in that color. You can reduce the number of colors to reduce the file size, but if you have subtle gradients you get banding. But if all you've got is a text image or a simple graphic this can save you lots of bandwidth.
The difference between 4.8 and 3.1 KB may not seem like much, but it's a 35% reduction in file size, and when you have 10 or 20 buttons it adds up in terms of download time. Because of the way gif compression works, images with horizontal coloring compress smaller than vertical.
| ||||||
