One of the major features that make the World Wide Web stand out from other forms of information media is that pages on the Web can contain full-color images. It was arguably the existence of those images that allowed the Web to catch on so quickly and to become so popular in so short a time. To place images on your Web pages, those images must be in GIF or JPEG format (GIF is more widely supported) and small enough that they can be quickly downloaded over a potentially slow link. The use of images in Web pages is one of the bigger arguments among users and providers of Web pages today. For everyone who wants to design Web pages with more, bigger, and brighter images to take full advantage of the graphical capabilities of the Web, there is someone on a slow network connection who is begging for fewer images so that his or her browser doesn't take three hours to load a page.

As a designer of Web pages, you should consider both the attractiveness and loading time of web pages. Balance the fun of creating a highly visual, colorful Web page with the need to get your information effectively to everyone you wants to have it.

Images for Information and Interaction

Images make the text information more vivid, support faster interpretations that

are not easily possible with text. So, we can say they are the epicenter of

multimedia. Images could be static or dynamic (in case of animations or

generating charts etc.). Static images could be created using any of the Image-

Editing tools or could be sourced from scanned images/image capture from

digital cameras, which in turn needs to be retouched for achieving good quality.

Animated images that may or may not have links are dynamic in nature. Some

basic GIF animations could be created using software like ImageReady and more

interactive complex animations could be achieved using advanced tools like

Flash.

As introduced earlier, the two most common graphic file formats on the web

are .GIF (Graphic Interchange Format) and .JPEG (Joint Photographic Experts

Group). These file formats are used on the web because they have the best

compression. Compression is the technique used to take a large file and turn it

into a smaller file by applying a fancy mathematical algorithm to it. Since many

users are accessing web pages on 28.8 modems, the smaller the file, the more

quickly it can be transferred over the net. Image size is no joke. If your images

take too long to load, a user will never even bother to wait to read about what

you have to say. A good rule of thumb is that you should use .GIF files for images

and .JPEG files for photographs.

Use the GIF format in these situations

• Transparent images.

• Table or page backgrounds that use only a few colors.

• Anytime when 256 colors is sufficient for the image

Use the JPEG format in these situations:

Images created from photos, especially of people, scenic, animals, etc.

When you need a background consisting of colors that are not available in

the GIF format. The .GIF format is also interesting because of the amount

of "special effects" it provides. Besides a standard .GIF file, you can easily

download freeware programs to create interlaced .GIF files,

transparent .GIF files, and animated .GIF files.

An interlaced .GIF file is a file that loads in pieces. It starts out fuzzy and

continually focuses until it is in perfect focus. Interlacing does not actually speed

up the loading of the image, but it does make a user feel as if it does because they

can watch it materialize.

Transparent .GIF's allow you to specify a single color that will become

transparent, thus allowing the background to show through. This is useful when

you want to create the illusion of irregularly shaped artwork such as when you

add text art to your page. Instead of getting an ugly square box around your text,

a transparent .GIF will make the type appear to blend right into the page. The

following example shows the same image, one with no transparency and one with

a transparent background.

Animated .GIF files allow you to merge several images into one in order to

create a cell animation. Note that for each cell, the image is that much larger,

so you must take care to make your animation in as few cells as possible.

Animated banners, or pictures, are some of the largest file size images on the

web. This is because they really consist of multiple images, which means larger

overall file size and increased download time.

Modern image animators will compress the images used in an animation by

removing pixels that are duplicated between the image frames. This can be a

tremendous benefit with animations consisting of similar looking frames.

File Formats

Overview of various multimedia file formats

Graphics File Format

Extension Features & Description

.gif Used for Web Graphics – Small, only 256 colors can have transparencies and animation.

.jpg Small, Compressed can have millions of colors.

.psp Internal format for Paint Shop Pro, useful if you are not done editing a photo.

.psd Internal to Adobe PhotoShop, useful for transfer to PhotoShop from Paint Shop Pro or other Adobe applications.

.png New format for use on the Web. Compressed, millions of colors, transparencies. Some quirks with display

.tif Common in use with early scanners, very large files. Best to avoid this format.

.wmf Windows Metafile. Useful for clipart, can be used to make large area, small sized web background .gifs

.bmp Large files, used for Windows programs and backgrounds.

.pcx Common older general purpose format, do not use on the web

.pcd Kodak PhotoCD Format, used with Photo Developing

BMP: It is the native format for MS Paint, the generic graphics program included with Windows. BMP supports 16 million colors and RLE (Run Length Encoding) compression. You can open and save BMP files in RGB, Indexed, Grayscale, and Bitmap color modes.

JPEG (Joint Photographic Experts Group): Primarily used for two purposes – to compress files and to save files for use on the Web. You can open and save JPEG files in RGB, CMYK, and Grayscale color modes. It is a lossy compression mode, which means that it loses information to make the file smaller. The amount of data that is lost depends on the settings you choose when you save a file in JPEG format.

GIF (Graphics Interchange Format): GIF, which stands for Graphics Interchange Format, is a loss less method of compression. All that means is that when the program that creates a GIF squashes the original image down it takes care not to lose any data. It uses a simple substitution method of compression.

The maximum compression available with a GIF therefore depends on the

amount of repetition there is in an image. A flat color will compress well -

sometimes even down to one tenth of the original file size - while a complex,

non-repetitive image will fare worse, perhaps only saving 20% or so. There are

problems with GIFs. One is that they are limited to a palette of 256 colors or

less. CompuServe, which created the GIF, did at one point say it would attempt

to produce a 24-bit version of the GIF, but then along came problem number

two: Unisys. Unisys discovered that it owned some patents to key parts of the

GIF compression technology, and has started demanding fees from every

company whose software uses the (freely available) GIF code. This has

somewhat stifled development. There is a 24-bit, license-free GIFalike called the

PNG format, but this has yet to take off

PCX (PC Paintbrush): Native format for PC Paintbrush, the Windows paint

program. PCX supports 24-bit color. You can open and PCX in RGB< Indexed,

Grayscale and Bitmap color modes.

PICT (Macintosh Picture): Native Macintosh image format. This format has been

used extensively in desktop-publishing applications and for transferring files

across platforms. PICT can support bitmaps and object-oriented images. It can

compress files and works particularly well on images with large areas of color,

such as black and white alpha channels

TIFF (Tagged Image File Format): A Standard for images that will be placed in

desktop-publishing programs. It can be transported across platforms and

compressed to reduce file size. You can open and save TIFF files in RGB, CMYK

(with alpha channels), Grayscale, Lab, Indexed, and Bitmap (without alpha

channels) color modes.

PCD (Kodak PhotoCD): PhotoCD is a technology developed by Eastman Kodak for high-quality, visually lossless image capture and storage. PhotoCD service providers are licensed by Eastman Kodak to capture (or convert) images to Kodak PhotoCD format and to write them to a specialized CD-ROM disc called a Kodak Digital Science PhotoCD Disc. These discs are each capable of holding up to 100 or more high-quality images. They are multi-session CD-ROM's, which means that a customer can have a few images added to the disc and bring it back to have more added at a later time. Images on the disc are stored in a specialized file called an Image Pac that contains five (or sometimes six) copies of the image at resolutions ranging from 72K to 18 (or 72) megabytes in file size. Image Pac's may be used on any IBM-PC Compatible, Macintosh or UNIX computer. Each image is accessible through Kodak's PhotoCD Access software. Wide acceptance of the Kodak PhotoCD format in the graphic arts industry has made the Image Pac a reliable standard for desktop publishers. Depending on the user's intentions, other software may be used to manipulate PhotoCD Images including:

• Kodak KPCMS Filters for Photoshop, Illustrator, PageMaker & other • Desktop publishing applications • Kodak PhotoCD Acquire Filter for Photoshop • Kodak PhotoInsert software for Microsoft Office applications • Internal PhotoCD filters in programs such as Microsoft PowerPoint • Corel PhotoPaint

Photographers and photo labs can use the larger resolutions, especially the Base x

64 image in the 6 resolution Image Pac, for archiving "electronic film" and for

photo retouching and restoration.

PSD (Photoshop format): Native Photoshop format – retaining all the Photoshop

specific features like layers, channels etc. Corel’s Painter and Photo Paint and

Jasc’s Paint Shop Pro can import PSD files with layers. To use an image in a PSD

file in Quark, you will need to flatten it (eliminate its layers) and convert it to TIFF,

EPS or other compatible format.

PNG (Portable Network Graphic): Supports transparency and 16 million colors.

Supports RGB and Grayscale color modes (with one alpha channel). Compression

possible.

ABC of Colors

Color Models

A color model is an orderly system for creating a whole range of colors from a

small set of primary colors. There are two types of color models, those that are

subtractive and those that are additive. Additive color models use light to

display color while subtractive models use printing inks. Colors perceived in

additive models are the result of transmitted light. Colors perceived in

subtractive models are the result of reflected light.

The Two Most Common Color Models

There are several established color models used in computer graphics, but the

two most common are the RGB model (Red-Green-Blue) for computer display

and the CMYK model (Cyan-Magenta-Yellow-Black) for printing.

RGB Color Model CMYK Color Model

1.Additive color model2.For computer displays3.Uses light to display color4.Colors result from transmitted light5.Red+Green+Blue=White

1.Subtractive color model2.For printed material3.Uses ink to display color4.Colors result from reflected light5.Cyan+Magenta+Yellow=Black

Notice the centers of the two color charts. In the RGB model, the convergence of

the three primary additive colors produces white. In the CMYK model, the

convergence of the three primary subtractive colors produces black. In the RGB

model notice that the overlapping of additive colors (red, green and blue) results

in subtractive colors (cyan, magenta and yellow). In the CMYK model notice that

the overlapping of subtractive colors (cyan, magenta and yellow) results in

additive colors (red, green and blue). Also notice that the colors in the RGB

model are much brighter than the colors in the CMYK model. It is possible to

attain a much larger percentage of the visible spectrum with the RGB model.

That is because the RGB model uses transmitted light while the CMYK model uses

reflected light. The muted appearance of the CMYK model demonstrates the

limitation of printing inks and the nature of reflected light. The colors in this

chart appear muted because they are displayed within their printable gamut (see

below).

Additive vs. Subtractive Color Models

Since additive color models display color as a result of light being transmitted

(added) the total absence of light would be perceived as black. Subtractive color

models display color as a result of light being absorbed (subtracted) by the

printing inks. As more ink is added, less and less light is reflected. Where there is a

total absence of ink the resulting light being reflected (from a white surface)

would be perceived as white.

Color Gamut and Color "Space

Examples of color depth are shown in the following table

Color Depth No. of Colors Color Mode

1 bit color 2 Indexed Color

4 bit color 16 Indexed Color

8 bit color 256 Indexed Color

24 bit color 16,777,216 True Color

Determining Color Depth

Since each bit represents 2 colors, it is easy to work out the number of colors

for the various color depths. The number of possible colors would be 2 to the

power of the number of bits per pixel:

A color depth of 4 bits would be 2 times itself 4 times:

2 x 2 x 2 x 2 = 16 colors

A color depth of 8 bits would be 2 times itself 8 times:

2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 = 256 colors.

A color depth of 24 bits would be 2 times itself 24 times:

2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x

2 = 16,777,216 colors

True Color

Images are known as "True Color" where each pixel is defined in terms of its

actual RGB or CMYK values. Every pixel in a true color image has 256 possible

values for each of it's red, green or blue components (in the RGB model) or cyan,

magenta, yellow and black (in the CMYK model). Because there are 256 possible

values for each RGB or CMYK component, then RGB true color would have a 24-

bit color depth and CMYK true color would have a 32-bit color depth. There are

millions of possible colors for each pixel in a true color image. That's why it is

called "True Color".

RGB images are derived from the 3 primary colors of red, green and blue. In

24-bit RGB color, each red, green and blue component is 8 bits long and has

256 variations in intensity. These variations are represented in a scale of values

ranging from 0 to 255 with 0 having the least intensity and 255 having the

greatest. When the 3 components are combined there are 256 x 256 x 256

possible combinations or 16,777,216 possible colors.

For example, white would be composed of maximum intensity of red, green

and blue light (R=255 G=255 B=255) and black would be composed of zero

intensity of red, green and blue light (R=0 G=0 B=0). Cyan would be composed

of maximum intensity of blue and green light and zero intensity of red light

(R=0 B=255 G=255). Magenta would be composed of maximum intensity of red

and blue light and zero intensity of green light (R=255 G=0 B=255):

R=255G=255B=255

R=0G=0B=0

R=0G=255B=255

R=255G=0

B=255

True Color and the CMYK Color Model

Images using the CMYK color model are also true color. CMYK images

are derived from the 3 primary colors of cyan, magenta and yellow plus

black. In 32-bit CMYK color, each cyan, magenta, yellow and black

component is also 8 bits long and has 256 variations in intensity. Each

pixel in a 32-bit CMYK image is one of 256 x 256 x 256 possible colors x

256 variations of black. A mix of 100% each of cyan, magenta and yellow

produces black, so the black component is extra. Even though there are

more bits per pixel in the CMYK model, in reality it has a smaller color

"space" or gamut than RGB. Many graphics programs support both color

models.

Indexed Color

Images which do not define colors in terms of their actual RGB or CMYK values and which derive its colors from a "palette" are known as "Indexed Color". The color palette of an indexed color image has a fixed number of colors. Because the palette is limited to a maximum of 256 colors, it is not possible for an image to look as realistic as it can use RGB or CMYK. Hence, they are not true color. This type of color is known as "Indexed Color" because colors in the palette are referenced by index numbers which are used by the computer to identify each color. Some file formats restrict the number of colors to fewer than 256. The GIF format is one such format and has a color depth of 8 bits per pixel or less. GIF files use indexed color and allow a maximum of 256 colors. TIFF files can be stored as indexed color or true color.

A sample palette is shown below:

Windows 16 Color Palette with Index Numbers

Grayscale Images

Grayscale images have a maximum color depth of 8 bits. The reason for this can also be worked out easily. When defining shades of gray in terms of RGB, each of the 3 red, green and blue components must be equal to each other. Examples of grays are R=192 G=192 B=192, and R=128 G=128 B=128. Since all three components must be equal for any shade of gray there are only 256 possible combinations. Thus, grayscale images have a maximum color depth of 8 bits. A complete 256 color grayscale palette is shown in the sample images below.

It is possible to create a grayscale image with a 4-bit color depth or less. Some software packages allow the user to reduce the number of colors in the palette from 256 to 16 or 2, though one would hardly classify a 2-color image as grayscale.

Browser Safe Color

Browser software is your window into the web. You can’t see web pages without the browser, so the browser plays a huge role in how your images are displayed, especially when viewed on 256-color systems. Fortunately, the most popular browsers all share the same palette management process. They work with the system palettes of each respective platform. This means that any artwork you create will be forced into a variety of different palettes, depending on which operating system it is views from. If you work with browser-safe colors when you create artwork, you still have the important task of ensuring that those colors remain browser safe during the file format conversion process. Unfortunately, files that are converted to JPEG do not retain precise color information. The lossy compression method used throws away information. So for graphics with lot of solid color, it is advisable to save in GIF format and retain the color information.