Web Graphics for Beginners: Part 4

Home > Build > Graphics > Web Graphics for Beginners

Inside the GIF - Transparencies, Animations, Color Palettes and More

The GIF uses a maximum of 256 colors. The file size, being a combination of the amount of colors, and the physical size makes it an ideal format for buttons, text based graphics or any graphic that doesn't require full color.

GIFs also support many features that other formats, such as JPEGS, do not. GIF's support transparencies, which as many web designers can tell you, is a necessity. In most programs, the user simply has to decide which 'colors' will be transparent. Commonly, the white background is chosen as transparent, however it's often a good idea to choose off-white or near-white colors as transparent as well, or there could be a white outline around the entire graphic.

GIFs can also be interlaced, which means that after the graphic has partially downloaded, a less than clear representation of itself will be visible, and that representation will become clearer as more data is downloaded until the GIF becomes it's whole self.

GIFs also support animations. Yes, you can make stuff move around with them. The animation process is created by combining a few standard bitmap graphics, which are displayed in a series to simulate the animation. Very similar to how those old 'flip-the-pages' books used to animate. Remember those?

Because of the popularity of animations, GIFs are the format of choice for banners or anything required to attract attention. The drawback is that many designers have a tendency to create very loud and obnoxious animations that can cause a surfer to, god forbid, turn images off.

There are plenty of other ways to animate, such as DHTML, Flash and Shockwave, Quicktime, etc. but the GIF is probably the easiest way. No code, authoring knowledge, or video editing capability is needed. All one really needs to know is how to create and manipulate a graphic. Hopefully you are on your way to learning that.

Remember, the GIF only supports 256 colors. Any more will result in something called dithering. Dithering happens when the graphic requires more colors than the format's palette can provide. When this happens, the format will assign stray colors (colors outside of the palette) as being colors from within the palette. This can create a very ugly, unrealistic image.

The other format, the JPEG

The JPEG, as mentioned before can handle millions of colors. The JPEG also compresses more, which means that the browser can download it a little faster.

Compression is simply a method that affects the file size of a graphic. Because everything on the web has to be downloaded, compression is a necessity. Without compression, graphics can be 10 times the size. There are some formats that will compress an image without affecting the overall quality of the image. A TIF is the best example of that.

When an image is compressed, usually extraneous information is taken out of the image code. For instance, let's suppose we have an image with a single black line. The code of an uncompressed image would say, 'this pixel is black', 'this pixel is black', 'this pixel is black', etc. until every pixel within the line is covered. Compressed image formats will take an entire area, such as the width of the line, and say, this is all black. This chops down all the unnecessary code, and results in a much smaller file.

That is how the JPEG works, although it goes a little further. Basic compression alone wouldn't trim images down enough to make them feasible for the web. Which is why the TIF is not used on the web. The JPEG will compress the image to the point where it affects the image quality. Web developers can often get away with this, because often the deterioration of quality isn't noticeable on the screen. With most programs, the quality is compromised by a percentage, or by a number from 1 to 10. A graphic with a compression #1 would be very poor quality, and probably too poor even for the web. One can usually get away with about a 4 or a 5, sometimes less, sometimes more. Each number will significantly trim the file size.

Part 3: Scaling and Sizing Graphics

Web Graphics For Beginners

Part 5: Optimization