Introduction to Graphics on the Web

T3L8

Introduction to Graphics on the Web

Introduction

This lesson is designed for you to gather information about graphics and their use in a web environment. When you finish this lesson, you should be able to:

· Describe how color is produced on the web.

· Describe how bit depth affects color.

· Describe color calibration.

· Describe how color in browsers is produced.

· Describe the HTML tags that enable color manipulation on a web page.

· Describe the GIF graphic format.

· Describe the JPEG graphic format.

· Describe the PNG file format.

· Describe graphic file optimization techniques.

· Choose appropriate graphics for a given situation.

Because the colors on the web are displayed through a computer monitor, you need to understand some basic color issues. Understanding these issues will assist you in visualizing and creating web pages and sites.

First, you need to understand how color is created on a computer monitor, and how browsers and HTML handle color. Read the following pages:

What is Computer Color?

Bit Depth and Color

Color Calibration

Color in Browsers

Color in HTML

Next, you need to understand the different graphic formats used to present graphics on the web. Read the following pages:

The GIF Graphic Format

The JPEG Graphic Format

Other File Formats

Finally, understanding some of the logistics and proper uses of graphics will help you make decisions about graphic use and placement. Read the following pages:

File Sizes & Optimization

Use of Graphics to Get a Point Across

Additional Resources

Webmonkey - Graphics & Fonts

http://www.hotwired.com/webmonkey/graphics_fonts/?tw=graphics_fonts

<devhead> - Graphics

http://www.zdnet.com/devhead/filters/graphics/

Features and differences of GIF vs JPEG

http://www.servtech.com/~dougg/graphics/

What is Computer Color?

Computer screen-based color is composed of projected light and pixels. The use of color adds an entire new dimension to web pages, but a designer has to be careful in the selection of colors because of different renderings by different browsers and platforms, different video cards, and even by individual monitor settings.

RGB color

The color of a pixel (one screen dot) is made up of three projected colors of light that mix together optically. The projected lights form the colors red, green, and blue, and when they are mixed together they create a color system called RGB. A digital color image pixel is just a RGB data value (Red, Green, Blue). The color is represented by numeric RGB color values in a 24-bit number that has three 8-bit numbers for each pixel.

An 8-bit byte can contain one of 256 numeric values ranging from 0 to 255. The pixel RGB data value shows how much Red, Green, and Blue to show (0 = none, 255=all), and the three colors and intensity levels are combined for an image pixel. Black is an RGB value of (0, 0, 0) and White is (255, 255, 255). The composite of the three RBG values creates the final color for that one pixel area. Red and Green make Yellow, so (255, 255, 0) means Red and Green, each fully saturated (255 is as bright as can be), with no Blue at all (zero), and the resulting color is Yellow. Gray has the property of always having equal RGB values. So (220, 220, 220) is a light gray (near white), and (70,70,70) is a dark gray (near black).

Other color-coding schemes do exist, but are beyond the scope of this discussion. Lab (lightness, a channel, and b channel) is one. HSB (hue, saturation, and brightness) is another. The schemes Pantone and CMYK are color schemes for printing, not displaying colors, and are not included in this discussion.

Bit Depth and Color

In color, bit depth refers to the number of colors in an image or the number of colors a computer is capable of displaying. As described in What is Computer Color the RGB color system uses a series of three numbers to represent color. The numbers represent the intensity of the Red, Green, and Blue color components that are projected from the computer screen in each pixel. With 24-bit color, each red, green, and blue number ranges from 0-255, which is 8 bits of storage in the computer. That is why the common color system used by designers is called 24-bit color (3 colors x 8 bits = 24 bits).

A Bit Depth Table

32 bit = 16.7 million colors + 8-bit alpha channel for transparency values (True color)

24-bit = 16.7 million colors (True color, photo-realistic graphics possible)

16-bit = 65.5 thousand colors (High resolution)

8-bit = 256 colors

7-bit = 128 colors

6-bit = 64 colors

5-bit = 32 colors

4-bit = 16 colors

3-bit = 8 colors

2-bit = 4 colors

1-bit = 2 colors

This has serious implications for web page designers using graphics. If a computer has only an 8-bit color card, it cannot display more than 256 colors at one time.

The majority of people who create artwork for web sites are viewing the artwork under better conditions than the average end user. When people with 256 color systems view your web screens, they cannot properly see images in 24-bit, even if they want to. A browser will do it's best to display a 24 bit image on a 16 or 8 bit display, but the result is usually less than pleasing.

Visual Examples of this…….

A 24-bit graphics displayed with millions of colors.

A 24-bit graphic displayed with 256 colors. Notice the "chunky" colors.

As a web page designer, it is thus critical that you find out (if possible) what your client/audience is capable of viewing: 8-bit, 16-bit, or 24-bit color, and design/incorporate the appropriate graphics. If you cannot know your audience's capabilities, your safest course is to use 8-bit graphics. You may have to convert 16 or 24-bit graphics to 8-bit ones. Also, the higher quality the graphic, the larger its file size (usually), and the longer it will take to download and display. See the File Sizes & Optimization section for more information.

Color Calibration

Different systems have different color cards and monitors, and even two identical systems and monitors will display color slightly differently due to calibration differences and gamma (the overall brightness of a monitor display) settings. Thus, there will always be color differences and differences in brightness that cannot be controlled by the designer. For example, Macs are typically brighter than PCs because of differences in native gamma settings. An average gamma setting for Mac monitors is 1.8 gamma while that for an average PC is 2.5 gamma. Web pages can now be viewed over television screens which are calibrated differently from computer monitors.

The consequences of all this is that graphics that look OK on a PC or Unix monitor, will look pale and insipid on a Mac monitor and what looks correct on a Mac will be visibly too dark on a PC or Unix monitor. One compromising solution to this problem is to use an intermediate gamma setting of 2.2 when a graphic is designed - this is the standard recommended by the W3C, and is the same gamma used for broadcast television. Most commercial graphics editing programs allow you to alter the gamma setting. That way, any GIF or JPEG graphic image that you create should look the same on both platforms and television.

Color in Browsers

It is usually safe to assume that if a machine has color capability, it has at least 8-bit color capability. That means the machine's monitor is capable of displaying 256 colors at one time. The question is, which 256 colors will be displayed? Without some sort of standard set (called a palette) of 256 colors to call upon when creating 8-bit graphics, you would have no way of knowing if the palette you used to design your graphic would be the same one used by another user. Fortunately, early web developers foresaw this potential disaster, and a special palette (named the Web Palette) was designed. The Web Palette consists of 216 colors shared by both Macintosh and Windows systems. The 216-color palette has 6 red values, 6 green values, and 6 blue values, and color numbers will all be formed from combinations of hex 00, 33, 66, 99, CC, and FF. If a machine is set to display 8-bit images, and a 16 or 24-bit image is loaded, the browser will automatically dither the image, using the Web Palette. Dithering means two or more colors from the palette are used (placed side by side, pixel by pixel) to approximate the color. The result may or may not be pleasing to the eye. If a color background is selected on a 24-bit system and then is viewed on a 256-color monitor, the browser will convert it to one of the 216 colors; it will shift the colors to its own palette. So, it is a good idea to use browser-safe colors when choosing color schemes for backgrounds, text, or link colors.

Color in HTML

In HTML, it is possible to specify colors on a web page that are not part of a graphic. For example, solid background colors and text colors are specified by HTML tags, not by a pre-existing graphic.

Information of text color is covered in the section on Fonts

To change the color of a background, the BODY tag is used. See this example [[http://www.hidaho.com/colorcenter/cc.html]].

Tags that support this:

The GIF Graphic Format

GIF (Graphic Interchange Format) is the oldest and possibly most often used graphic format for delivery of graphics to the web. It was invented by the UniSys Corporation. All visual browsers know how to display GIF graphics.

A GIF image can contain up to 256 colors, and the information about these colors is stored in the image itself. Thus, for images that can appear well using only 256 colors or less, the GIF format is the format of choice. Graphics that fall into this category are usually ones with lots of solid colors, and ones with little color variation. Color cartoons and many technical illustrations fall into this category. Color photographs of people or works of visual art are usually poor candidates for the GIF format - they have more that 256 variations of color in them. Saving these types of images in GIF format may cause a loss of color information - people's skin may appear blotchy, or a fine work of art may not look (color-wise) as it does in the real world.

The use of dithering may reduce this color loss. Dithering is a way of simulating a color by using alternating pixels of different colors. The color table may not contain all the colors used in the image, so to simulate colors not in the color table, you can dither the colors. Dithering mixes the pixels of the available colors to simulate the missing colors. You can choose from three dithering options:

· None: Does not dither colors but instead uses the color closest to the missing color. This tends to result in sharp transitions between shades of color in the image, creating a posterized effect.

· Diffusion: Uses an error-diffusion method that produces a less structured dither than the Pattern option.

· Pattern: Uses a halftone-like square pattern to simulate any colors not in the color table. This option is available only when you are using the Mac OS System palette, the Web palette, or the Uniform (216 colors) palette.

Experiment with either diffusion, dithering or none to determine which works best with your particular image. Remember, though, that dithering increases file size. See File Sizes & Optimization for more information.

GIF Variations

There are two types of GIF: GIF87a and GIF89a. GIF87a supports transparency and interlacing whereas GIF89a supports transparency, interlacing and animation. Transparency, interlacing and animation can be combined in a single image. Most graphics packages will save GIFs in the GIF89a format.

• Interlaced GIFs

Interlaced GIFs are images that start out blocky and appear less and less blocky until they come into full focus. Interlacing does not affect the overall size or speed of a GIF. Interlacing is supposed to make it possible for your end viewer to get a rough idea of your visuals and to make a decision whether to wait or click onward before the image finishes rendering. You should not use interlaced GIFs for essential graphics.

• Transparent GIFs

Transparent GlFs are used to create the illusion of irregularly shaped artwork. All computer-made images end up in rectangular-shaped files; it's the nature of the medium. This usually means you will have an image on a color rectangular background. In many cases, you don't want viewers to see this background. Certain file formats, such as GIF, can "mask, or hide, these regions. This "masked region" appears to be transparent.

• Animated GIFs

Animated GIFs are part of the GIF89a specification. They are formally called multi-block GIFs because multiple images can be stored as separate blocks within one single GIF document. This is very much the same as cel-based animation, where each frame in the animation is slightly different from the one preceeding it. When the GIF document is viewed, the multiple images display, quickly and in succession, and produce a streaming animation. Just like other GIF files, the number of colors and amount of noise in the frames affect the overall file size. If you have a 100-frame animation with each frame totaling 5k, your animated GIF will be 500k. It simply multiplies in size according to how many frames you create and the file size of the individual frame of artwork. The beauty of animated GIFs is that they require no plug-ins (see the Browsers lesson for information on plug-ins ) and the authoring tools to create them are often free and easy to learn.