basic image types : 

RGB - Each pixel can have any color, independent of all other pixels. Each pixel has a value for Red, Green, and Blue, and each color value has a range of 0-255 (or 00 to FF in hexedecimal).

Bit depth = The number of different colors available for each pixel

• 32bit = 16,777,216 colors + 256 shades of gray for the alpha channel
• 24bit = 16,777,216 colors
• 16bit = 65,536 colors (over 50% of computers display this many colors)

Indexed images are a limited palette image format that is used for the web, game machines and other situations where there is a need for reduced image size or hardware that supports a limited number of colors.

Indexed - Pixels in an image are limited to a small number of colors available for the entire image. Each pixel has value that points to an entry in a table of colors (also known as a palette or CLUT - Color LookUp Table).

Here is an example of the palette for the duck image below. Pixels in the image can only be one of the 8 colors in the image's palette.

Bit depth = The number of different colors available for the entire image - i.e. number of colors in the palette. The fewer bits per pixel, the smaller the file.

• 8bit = 256 colors
• 6bit = 64 colors
• 4bit = 16 colors
• 2bit = 4 colors
• 1bit = 2 colors

Dithering is a way to fool the eye into thinking there are more colors in the image than are actually there. Dithering works by scattering pixels of different colors over an area so that the eye averages them to a color that's a combination of the colors used.

Non-dithered image (2382 bytes)	Dithered image (3598 bytes)

These are indexed images use the same number of colors (8). The second image looks better through the use of dithering which creates the impression of gradients. The disadvantage of dithering is that it does not compress as well in the GIF format.

• Best for - Graphic images with large areas of a single color, images with transparency, images with sharp edges, images with few colors.
• Transparency - Defines one color to be transparent
• Animations - Format supports multi-frame animations
• Interlacing - A way to encode the image so that when a small amount of the image has been downloaded, it can be displayed in rough form. The image becomes progressively more clear until the whole image is downloaded.

A "lossy" compressed file format for RGB images. Among other things, it eliminates hard edges to achieve compression. The loss of quality in the image is controlled by the quality setting when you save a JPEG image. The lower the number, the worse the quality.

• Best for - Photographic images, complex images, images with soft edges
• No transparency or animation
• Progressive - A format similar to interlacing for GIFs that displays the image with increasing quality as it downloads. The progressive format is not supported by some older browsers.

A new format that combines the best of GIF and JPEG. It supports both Indexed images and RGB images. It also supports a 256 color alpha channel for transparency. Not fully supported by current browsers.

• Not currently recommended for use
• PNG supported by: Netscape/Mozilla for Windows, and Netscape/Mozilla and Explorer 5.0 for the Mac
• Spring 2003: Explorer 6 for windows still does not support PNG alpha channel

Up-to-date information on the current status of browser PNG support can be found here:

http://www.libpng.org/pub/png/pngapbr.html (browser compatibility)
http://www.libpng.org/pub/png/ (general info about PNG)

The primary goal in creating graphics for the web is to maintain high image quality, while creating files that are as small as possible. This is always a compromise, and requires a subjective judgement by the designer. The best approach is to experiment with different image settings to discover a good compromise appropriate for the image and web page.

To make a GIF, do the following to an RGB image in Photoshop:

• Create masks to specify any transparent areas you need
• Show and hide any layers to get the image you need
• Determine the color of the web page background that the image will be displayed against
• Select FILE>SAVE FOR WEB...
• Notice that the image is displayed in its compressed format. And at the bottom left of the screen, the size of the compressed image is shown. Keep track of both of these as you adjust the various settings. Keep in mind that the total size of a web page including all of its images should be less than 60K.
• Select GIF 32 No Dither from the Settings pull down. This will provide a good starting point for your settings.
• Select PERCEPTUAL, SELECTIVE, ADAPTIVE, OR WEB for the palette selection method. SELECTIVE is the default and will usually provide good results. Following are Photoshop's definition of these methods, quoted from Adobe Photoshop Help:
  • Perceptual - Creates a custom color table by giving priority to colors for which the human eye has greater sensitivity.
  • Selective - Creates a color table similar to the Perceptual color table, but favoring broad areas of color and the preservation of Web colors. This color table usually produces images with the greatest color integrity. Selective is the default option.
  • Adaptive - Creates a custom color table by sampling colors from the spectrum appearing most commonly in the image. For example, an image with only the colors green and blue produces a color table made primarily of greens and blues. Most images concentrate colors in particular areas of the spectrum.
  • Uses the standard 216-color color table common to the Windows and Mac OS 8-bit (256-color) palettes. This option ensures that no browser dither is applied to colors when the image is displayed using 8-bit color. (This palette is also called the Web-safe palette.) Using the Web palette can create larger files, and is recommended only when avoiding browser dither is a high priority.
• Select NO DITHER. This will produce the smallest files, while the other Dither options may improve the image quality. If Dither is needed, you may want to consider JPEG for the image format.
• Select the smallest number of colors that produces an acceptable looking image.
• Experiment with the amount of Lossy-ness. Look at both the image quality and image size to find the best setting. Usually no more than 0-15% Lossy-ness is best.
• If you want the image to display while downloading, select the INTERLACED checkbox.

Transparency in GIFs allows you to see through parts of the image to the background of the web page. Photoshop creates transparency in GIFs by using the mask transparency in the Photoshop file.

• Create the transparency in your photoshop file, and set your layers so that you can see the checkerboard transparency in the file before you select SAVE FOR WEB
• If you have created a mask for transparency, and want the background of the web page to show through the mask area, check the TRANSPARENCY box in the SAVE FOR WEB palette on the right side of the screen.
• Select a MATTE color. This color selection affects the color of the anti-aliasing fringe used at the boundary between the image and the transparent areas. E.g. if your image will be displayed on a white web page, select white as the MATTE color to make a clean, anti-aliased edge for the image.

To make a JPEG, do the following to an RGB image in Photoshop:

• Show and hide any layers to get the image you need
• Select FILE>SAVE FOR WEB...
• Notice that the image is displayed in its compressed format. And at the bottom left of the screen, the size of the compressed image is shown. Keep track of both of these as you adjust the various settings. Keep in mind that the total size of a web page including all of its images should be less than 60K.
• Select JPEG Medium from the Settings pull down. This will provide a good starting point for your settings.
• Check the OPTIMIZED checkbox. This makes the file size smaller, and is compatible with almost all browsers.
• Experiment with the QUALITY setting while checking the Optimized image for JPEG artifacts and looking at the resulting file size. Usually a setting between 20 - 40 works well. Choose the lowest quality setting acceptable so the file is the smallest.
• In some cases (e.g. an image with significant noise in it), you can reduce the file size by blurring the image slightly. Adjust the BLUR setting while watching the image quality and the file size.
• If you want the image to display while downloading, select the PROGRESSIVE checkbox.

Transparency is not available in JPEG images. But the MATTE feature described for GIFs can be used in JPEGS. If the photoshop image has transparency, the matte color you choose in SAVE FOR WEB will change the transparent areas of the image to that color. This is useful if you need to put an image against a particular color on a web page.

Working with the fern, graphic text, and temple images in the download, use Photoshop to convert them to web format with FILE>SAVE FOR WEB. Do the following for each image:

1. Decide on the best format to use for this image: JPEG or GIF
2. Decide on the smallest file size possible without compromising image quality
3. Document the settings you use for your final versions of each image (e.g. number of colors in a GIF, compression setting for JPEG) so they can be compared in class.
4. Note the size of each file you create so they can be compared in class.

all materials on this web site © copyright 2003, Philip van Allen