As with print, web graphic formats fall into two categories: bitmap and vector. On the web, the bitmap formats — GIF, JPEG, PNG — describe artwork as a series of colored dots called pixels. Each pixel in a bitmap image has a fixed size and is therefore resolution-dependent, meaning that the dimensions of the image depend on the resolution of the monitor on which it is viewed.

The vector formats — SVG and SWF — describe artwork mathematically, as a set of geometric objects. Because of this, vector graphics are resolution-independent and can be scaled up or down without losing any image quality.

One of the main challenges for web designers is to get great-looking images at the smallest possible file sizes. Each format has its pros and cons. The examples below discuss each format’s capabilities.

JPEG
JPEG (joint photographic experts group) is the standard format for compressing continuous-tone images such as photographs. Optimizing an image in a JPEG format relies on lossy compression, which selectively discards data. The example below shows the same image saved with various degrees of compression (using the Save for Web palette available in Photoshop®, ImageReady®, Illustrator®, and GoLive®). You may notice little image-quality difference in the last two images but a significant increase in file size.

GIF
GIF (graphical interchange format) was developed by CompuServe and is the standard format for compressing images with flat color and crisp detail, such as line art, logos, and illustrations with type. In addition to preserving specific colors, GIF files have two additional advantages over JPEG files: they can contain transparency and they can be animated.

In this example, you can see the difference in compression when compared to the JPEG format. The compression is sharp (almost jagged in places). For this reason, designers choose JPEG for the majority of continuous-tone images.

However, GIF files can contain transparency, so if your image or graphic needs to be "see-through," you will have to use GIF. The transparency in GIF is limited to a single color, however, so you will need to choose a matte color when you are using the Save for Web feature. In the example below, we see two versions of the star graphic, one with a matte color set to white and one set to orange. When the first star is over white, the image appears smooth and clean. When the same image is against orange, we can see the "halo" effects the white matte gives off.

In this case, only 100% is transparent in the image, and any pixels partially white mixed with blue on the edges are not transparent, so they show up against the darker background. Likewise, the star matted to orange has the same effect when placed against white.

Lastly, GIF files can be animated as well. This little feature of the file format is responsible for the majority of animated banner advertisements you see on websites.

PNG
PNG (portable network graphics) is a lossless bitmap image format. PNG files can be saved in two versions, PNG-8 and PNG-24. Each format has support for transparency; however, they cannot be animated. Also worth noting is that some web browsers may not support PNG files yet. Before using these formats, test them in your targeted browsers.

PNG-8 is similar to the GIF format in its support for flat color and crisp detail and in its ability to have a transparent color. You still need to assign a proper matte color to your image.

PNG-24 is the format many designers have been waiting for. In addition to supporting 16-bit color (like JPEG files), there is still 8 bits left over for transparency! This means that the edges of your images can smoothly blend into nothing, or you can create realistic drop-shadows and bevels on your artwork without having to worry about a matte color.

The example below shows the two PNG formats and their effect on image compression.

The example below shows the two PNG formats and their transparency features. Similar to the GIF format, the PNG-8 format has only one color of transparency (right), so you can see the "halo" effects when the image is over a darker background. The PNG-24 format (left) appears smooth on all sides, regardless of what is underneath it.