There are several elements that make graphics for the web unique. It's important to remember that the Web is intended to be a multi-platform environment where web pages and their elements like graphics work on different operating systems, browsers, and computer hardware setups. For graphics, the means that settings on computer displays (monitors) must be able to run images on websites despite significant differences in capabilities. In the early days of the web, one major difference was the number of colors a display could handle. Nowadays, monitors and graphics cards have more power but the larger considerations are for bandwidth.

What has emerged is three main types of graphical file formats for the Web that can be used for digital image files you add to your web pages. Compatibility for these file formats is built into all major browsers. What they have in common is that they each use some kind of compression scheme to remove data from the original file type to make the file size smaller while retaining as much of original visual fidelity as possible. Each has a specialty with GIF's being well-suited for line drawings and JPEG's best for photographs. PNG can be viewed as a kind of GIF on steroids and while it is not as widely used as the others, is increasing in adoption by web designers.

GIF (Graphics Interchange Format): are ideal for line-drawings or images with large blocks of similar colors with simple textures and repeating patterns. It handles subtle patterns or textures poorly such as photographs contain with subtle shading shifts. GIF's are also limited to 256 colors.

• Transparent: Transparent Gif's allows for a single color to be selected that will render transparent in a browser. A solid background color is usually chosen for this to create the effect of the image not being a square. [transparency with Adobe Image Ready tutorial]
• Animated: This allows you to place multiple images to display in a timed pattern creating an animation.

JPEG (Joint Photographic Experts Group): was designed especially for photographic type images. The compression method allows for millions of colors which is why it is ideal for photographs. As mentioned above, it is a lossy format so you should always save a master version of images your compress in this method.

PNG (Portable Network Graphics): was designed to replace the GIF format. It adds the ability to use alpha channels, gamma compression and allows for better compression (on the order of 5% to 25%). PNG does not allow for multiple image support which does not allow for animations.

Macrmomedia DevNet Article, "Converting Image to Successful Web Graphics"

Some Other Points About Graphics

Bitmap (Raster) vs. Vector:	Bitmaps: These are the predominant graphic types (our two favorite "GIF" and "JPEG" are bitmap) and are made up of individual dots (pixels) arranged in a grid (width x length x pixel depth -- where pixel depth is number of colors). Each pixel describes a color and takes up a set amount of memory. Therefore, the larger you make an image, the more you increase the number of pixels needed and the larger the filesize becomes. [examples: GIF, JPEG, TIFF, your monitor screen] Vector: Instead of using pixels, vectors are generated using mathematical instructions describing shapes, lines and curves .
Resolution:	Image resolution refers to the spacing of pixels in an image and is measured in pixels per inch, ppi, (sometimes called dots per inch, dpi). The higher the resolution, the more pixels in the image. Higher resolution allows for more detail and subtle color transitions in an image. Monitors allow for display of only 72 dpi, any graphics destined to be viewed on a monitor won't benefit from a higher resolution. In general, when creating graphics for the Web, you should work in a 72 dpi mode.
Compression:	Compression is the key to web graphics since it refers to the process of reducing the file size to allow for faster transmission of images over a narrow bandwitdth. This is done in the case of GIF images by the reduction of colors. JPEG images achieve this by separating brightness information from color information. GIF's are referred to as lossless which means that when the image is decompressed, it can revert to it's original quality. JPEG's are lossy because once files are compressed into this format, the original information is lost.
Interlaced:	Interlaced images are those that slowly appear bleary and then gradually come into focus. This works using GIF's or Progressive JPEG's (a later revision of the standard version).
Image Maps:	Image maps allow you to create multiple links over the top of a single image. By apply shapes (circles, squares or polygon) you can define spatial coordinates to be "hot zones" which link users to a specified page or site.
Sliced Images:	A technique for reducing the loading time on very large images has been to cut into pieces which will load quicker individually than a large single image. Tables are then used to hold the pieces together.