Image files are made up of picture elements, called PIXELS The pixels that comprise an image are in the form of a grid of columns and rows. Each of the pixels in an image stores digital numbers representing brightness and color.
Major graphic file formats
There are many graphic file formats, if we include the proprietary types. The PNG, JPEG, and GIF formats are most often used to display images on the Internet. These graphic formats are listed and brieflydescribed below, separated into the two main families of graphics: raster and vector.
Raster formats
JPEG
The JPEG (Joint Photographic Experts Group) image files are a lossy format. The DOS filename extension is JPG, although other operating systems may use JPEG. Nearly all digital cameras have the option tosave images in JPEG format. The JPEG format supports 16-bit color and produces relatively small file sizes. Fortunately, the compression in most cases does not detract noticeably from the image. But JPEG files do suffer generational degradation when repeatedly edited and saved. Photographic images are best stored in a lossless non-JPEG format if they will be re-edited in future, or if the presence of small "artifacts" (blemishes), due to the nature of the JPEG compression algorithm, is unacceptable. JPEG is also used as the image compression algorithm in many Adobe PDF files.
TIFF
The TIFF (Tagged Image File Format) is a flexible image format that normally uses a filename extension of TIFF or TIF. TIFF's flexibility is both a feature and a curse, with no single reader capable of handling all the different varieties of TIFF files. TIFF can be lossy or lossless. Some types of TIFF offer relatively good
lossless compression for bi-level (black and white, no grey) images. Some high-end digital cameras have the option to save images in the TIFF format, using the LZW compression algorithm for lossless storage. The TIFF image format is not widely supported by web browsers, and should not be used on the World Wide Web. TIFF is still widely accepted as a photograph file standard in the printing industry. TIFF is capable of handling device-specific color spaces, such as the CMYK defined by a particular set of printing press inks.
RAW
The RAW image format is a file option available on some digital cameras. It usually uses a lossless compression and produces file sizes much smaller than the TIFF format. Unfortunately, the RAW format is not standard among all camera manufacturers and some graphic programs and image editors may not accept the RAW format. The better graphic editors can read some manufacturer's RAW formats, and some (mostly higher-end) digital cameras also support saving
images in the TIFF format directly. There are also separate tools available for converting digital camera raw image format files into other formats, one such tool being Dave Coffin's dcraw, which is made available under a combination of GNU General Public License and public domain licenses.
Adobe's Digital Negative Specification is a recent (September 2004) attempt at standardizing the various "raw" file formats used by digital cameras.
PNG
The PNG (Portable Network Graphics) file format is regarded and was made as the free and open successor to the GIF file format. The PNG file format supports true color (16 million colors) whereas the GIF file format only allows 256 colors. PNG excels when the image has large areas of uniform color. The lossless PNG format is best suited for editing pictures, and the lossy formats like JPG are best for final distribution of photographic-type images because of smaller file size. Many older browsers do not yet support the PNG file format. The Adam7-interlacing allows an early preview even when only a small percentage of the data of the image has been transmitted.
GIF
GIF (Graphic Interchange Format) is limited to an 8-bit palette, or 256 colors. This makes the GIF format suitable for storing graphics with relatively few colors such as simple diagrams, shapes and cartoon style images. The GIF format supports animation and is still widely used to provide image animation effects.
BMP
The BMP (bit mapped) format is used internally in the Microsoft Windows operating system to handle graphics images. These files are typically not compressed resulting in large files. The main advantage of BMP files is their wide acceptance and use in Windows programs. Their large size makes them unsuitable for file transfer. Desktop backgrounds and images from scanners are usually stored in BMP files.
XPM
The XPM format is the default X Window System picture format (very popular in the Linux world). Its structure is based on the string format of the C programming language. Because XPM was designed to be human-readable, and is stored as uncompressed plain-text, the file size of these pictures can be more than twice as large as uncompressed binary bitmap files (such as BMP, uncompressed TIFF, MacOS-PICT, or Irix-RGB formats). This format is unsupported by most non-Unix software and operating systems (though many web-browsers retain display support for the XBM subset, which was the minimal image format in the early days of the WWW).
MrSID
The MrSID (Multiresolution Seamless Image Database) format is a wavelet compression format used mostly by Geographic Information Systems to store massive satellite imagery for map software.
Vector formats
As opposed to the raster image formats above (where the data describes the characteristics of each individual pixel), vector image formats contain a geometric description which can be rendered smoothly at any desired display size.
SVG
SVG (Scalable Vector Graphics) is an open standard created and developed by the World Wide Web Consortium to address the need (and attempts of several corporations) for a versatile, scriptable and all-purpose vector format for the web and otherwise. The SVG format does not have a compression scheme of its own, but due to the textual nature of XML, an SVG graphic can be compressed using a program such as gzip. Because of its scripting potential, SVG is a
key component in web applications: interactive web pages that look and act like applications
GIF and JPEG are currently the primary file types for graphics on the Internet. This article provides an overview of each of them, as well as when each format should be used.
The GIF Format
The GIF format is one of the most popular formats on the Internet. Not only is the format excellent at compressing areas of images with large areas of the same color, but it is also the only option for putting animation online (unless you want to use Flash or other vector-based animation formats, which typically cost more). The GIF89a format also supports transparency, and interlacing.
GIF files support a maximum of 256 colors, which makes them practical for almost all graphics except photographs. The most common method of reducing the size of GIF files is to reduce the number of colors on the palette. It is important to note that GIF already uses the LZW compression scheme internally to make images as small as possible without losing any data
When to use them
Generally, GIF files should be used for logos, line drawings and icons. Avoid using it for photographic images, and graphics which have long stretches of continuous-tone in them. When you're designing GIF files, avoid using gradients and turn off anti- aliasing where possible to minimize the file size.
The JPEG Format
The JPEG format, with its support for 16.7 million colors, is primarily intended for photographic images. The internal compression algorithm of the JPEG format, unlike the GIF format, actually throws out information. Depending on what settings you use, the thrown out data may or may not be visible to the eye. Once you lower the quality of an image, and save it, the extra data cannot be regained so be sure to save the orginal
When to use
As a rule, the JPEG format should be used on photographic images, and images which do not look as good with only 256 colors.
optimize an image for the web using adobe photoshop JPEG v. GIF - Which format should I use? GIFs work well for images with large blocks of color and sharp edges. Notice the difference in file size. Using GIF format for this type of image produces a small file.
JPEGs work well for images with continuous tones, such as photographs. Again, notice the file size. In this case, the JPEG is smaller.
| |||||||||||||||
  | This document explains how to reduce an image's file size and format it for use on the Web. It is important to make image files as small as acceptable quality will permit, since smaller images dramatically decrease download time when users access your Web pages. | ||||||||||||||
 Reduce the physical size of the image.
 Change the image resolution.
 Change the compression for JPEG files.
 Change the number of colors for GIF files.
| |||||||||||||||
Transparent GIFs Using Adobe Photoshop, the image below was drawn against a white background. The copy on the left was saved in GIF format without using transparency - notice how the background of the image remains white although the background of the table is set to yellow. The copy on the right was also saved in GIF format, but with a transparent background.
 face.gif |  facetrans.gif |
Color Palettes
To display a full-color image on a 256-color computer, an application must simulate colors it can't actually display. The computer does this by dithering: combining pixels from its 256-color palette into patterns that approximate other colors. At a distance the human eye merges these dithered patterns into another color, but up close the image appears speckled. Because different operating systems and applications build color palettes according to their particular needs, color variance arises when moving across platforms and programs. You should prepare for the fact that visitors to your website will be using different systems with various color settings.
There is, in fact, no one universal 8-bit palette that will not dither on all platforms. However, there is a 216-color palette that will not dither on most. The web-safe palette (or browser-safe palette) consists of 216 colors that display the same on both Macintosh and PC operating systems. These colors will also display the same on PC systems using a low color depth. By using the web-safe palette you will ensure that the graphics you create look the same no matter what system or browser the viewer is using. When displaying graphics created with non web-safe palettes, the browser tries to approximate the color through dithering. This may work fine for some graphics, but will often produce results far from what you intended.
Web-safe colors should be used for creating images with large blocks of solid color. Photographs should not be remapped to web-safe color, as they will take on a blocky appearance.
To display a full-color image on a 256-color computer, an application must simulate colors it can't actually display. The computer does this by dithering: combining pixels from its 256-color palette into patterns that approximate other colors. At a distance the human eye merges these dithered patterns into another color, but up close the image appears speckled. Because different operating systems and applications build color palettes according to their particular needs, color variance arises when moving across platforms and programs. You should prepare for the fact that visitors to your website will be using different systems with various color settings.
There is, in fact, no one universal 8-bit palette that will not dither on all platforms. However, there is a 216-color palette that will not dither on most. The web-safe palette (or browser-safe palette) consists of 216 colors that display the same on both Macintosh and PC operating systems. These colors will also display the same on PC systems using a low color depth. By using the web-safe palette you will ensure that the graphics you create look the same no matter what system or browser the viewer is using. When displaying graphics created with non web-safe palettes, the browser tries to approximate the color through dithering. This may work fine for some graphics, but will often produce results far from what you intended.
Web-safe colors should be used for creating images with large blocks of solid color. Photographs should not be remapped to web-safe color, as they will take on a blocky appearance.
| Choosing a web-safe palette in Adobe Photoshop |  |
| |
 true color (millions of colors) |  Screen shot of image using lower color depth (256 colors) |
displayed in either mode.
 true color (millions of colors) |  Screen shot of image using lower color depth (256 colors) |
Although web-safe colors work well for creating images with large blocks of color, photographs
should not be remapped to web-safe color. The reason the first image looks better is because
dithering works quite nicely with continuous tone images. In fact, all JPEGs are dithered.
Look at the difference below:
 Saved as a jpg, using millions of colors |  Saved as a jpg, after conversion to web safe colors |
GIF Cruncher and JPEG Cruncher
Free on-line tools for compressing GIFs and JPEGS are available at www.gifcruncher.com and www.jpegcruncher.com. These tools are very useful for automatically reducing file size and comparing different levels of quality. Each tool will return several versions of your image, ranging from high quality and large file size, to low quality and low file size. Choose the file which best suits your needs, and save it to your disk.
UsefulLinks:
The Photoshop CS2 Book for Digital Photographers (with examples)
http://rapidshare.de/files/24631504/examples.rar.html
