Introduction to Graphics on the Web



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



- Graphics



Features and differences of GIF vs JPEG



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…….

[pic]

A 24-bit graphics displayed with millions of colors.

[pic]

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.

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 know you will be using 8-bit graphics, you should use the Web Palette to design those graphics.

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 [[]].

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.

The JPEG Graphic Format

The second most popular graphics format used to display graphics on web browsers is the JPEG (Joint Photographics Experts Group) format. JPEGs contain 24-bit color information, as opposed to GIF's 8-bit scheme. This means JPEGS can contain millions of colors, as compared to GIFs 256 color maximum.

JPEGS are best used for images where 256 colors are just not enough, or color accuracy is very important. Photographs and color artwork are two examples where JPEG format is often used.

JPEGs do not yet offer the universal interlacing, transparency, or animation that GIF images do, although these options are being pursued.

Other File Formats

Two other graphic file formats currently exist for displaying graphics on web browsers Progressive JPEG and PNG. Neither is very popular, so only their basics are covered here.

Progressive JPEG

A regular or "baseline" JPEG file is stored as one top-to-bottom scan of the image. Progressive JPEG divides the file into a series of scans. The first scan shows the image at the equivalent of a very low quality setting, and therefore it takes very little space. Following scans gradually improve the quality (much like an interlaced GIF works). Each scan adds to the data already provided, so that the total storage requirement is about the same as for a baseline JPEG image of the same quality as the final scan. The advantage of progressive JPEG is that if an image is being viewed on-the-fly as it is transmitted, one can see an approximation to the whole image very quickly, with gradual improvement of quality as one waits longer; this is much nicer than a slow top-to-bottom display of the image. The disadvantage is that each scan takes about the same amount of computation to display as a whole baseline JPEG file would. This file format is not supported by all popular browsers.

PNG Format

PNG (Portable Network Graphics) combines some of best features of GIF and JPEG. Like JPEG, PNG supports 16.7 million colors and compresses photographic images to smaller sizes than GIF does. PNG is a lossless compression method, meaning that no quality loss is incurred when it's applied to images. The PNG basic compression is called the ZIP method, and is like the "deflate" method in PKZIP, but PNG also incorporates special preprocessing filters that greatly improve the compression efficiency, especially for typical gradient data often found in 24 bit photographic images.

Unlike GIF or JPEG, PNG can be stored at many different bit depths using different storage methods. GIF, for example, can be stored only in 8-bit or lower bit depths. JPEGs must be stored in 24-bit and no lower. PNG can be stored in either 8-bit or 24-bit or 32-bit. PNG also has a multitude of different filtering methods. PNG was created to be a cross-platform file format and contains information about the characteristics of the authoring platform so that viewing software can automatically compensate and display the image correctly. What this means is that Macs and PCs, which each utilize different gamma settings can adjust properly for images created in the PNG file format.

It allows for transparent backgrounds and interlacing, and it even improves on those features by allowing for various degrees of transparency and for two-dimensional interlacing, which, transmits a rough overall view of the image faster than the one dimensional scheme used by GIF. PNG supports a far superior interlacing scheme than GIF. GIF interlacing gives a preview of the image after 1/8th of the image data has been recognized, whereas PNG gives a preview after only 1/64th of the image has loaded.

While PNG has many promising capabilities, this file format is not supported by many popular browsers. Use it with extreme caution, and verify that your clients can indeed view graphics in this format!

File Sizes and Optimization

A good rule of thumb to follow with graphics is to limit the total size of all images used on a page to less than 30K. This ensures that pages will load quickly even with a slow connection to the internet. Nobody likes to wait three minutes for a graphic to load, no matter how nice it is!

This presents the web page designer with a problem - how does one go about meeting this rule as often as possible? Fortunately, there are a number of ways you can use an image, maintain its quality, and trim your bandwidth - all at the same time.

Both GIF and JPEG images use compression schemes to squeeze graphic data into the smallest space possible.

GIF File Format

GIF format was uses something called the LZW compression algorithm. This process looks at the pixels in a row and counts how many are the same color. Instead of mapping each individual pixel, it converts the pixel information into a mathematical notation, dramatically reducing file sizes for graphics that contain large amounts of the same color. GIF compression is lossless, meaning that the GIF compression algorithm will not cause any unwanted image degradation. Because the GIF file format is lossless, illustrations with limited colors (less than 256) will not lose any quality.

GIF does significantly better on images with only a few distinct colors, line drawings and simple cartoons. Not only is GIF lossless for such images, but it often compresses them more than JPEG can. For example, large areas of pixels that are all exactly the same color are compressed very efficiently by GIF. JPEG can not squeeze such data as much as GIF does without introducing visible defects. (One implication of this is that large single-color borders are quite cheap in GIF files, while they are best avoided in JPEG files.)

The GIF format saves color in a maximum of 8-bit mode, which means a GIF file can contain a maximum of 256 different colors. When you save a GIF file, you are asked to select the palette to use when mapping and displaying the colors. When creating a GIF file, your final image size and quality are determined by how intelligently you make your indexed conversion choices. Indexed conversion is the process of changing the image into a indexed palette, which is the table of colors used by GIF images.

A GIF indexed palette can be 8 bit or less. For example, if you have a black and white image, you can use a 2-bit palette to display the two different colors. The smaller the palette in terms of bits, the smaller the graphic will be (in terms of storage space). So, for GIF images, you should try to find the minimal palette that still displays the graphic how you want it to appear.

Many graphic programs will automatically choose the minimal palette you need. You can also experiment with GIF images at GIF Wizard or GIF Optimizer .

GIF Wizard example.

If you dither a GIF image, its file size will increase. If you have to dither a GIF image to maintain quality, you should also store the graphic in JPEG format and compare the two file for size, display speed, and quality. It is possible that a JPEG graphic is better choice under these circumstances.

JPEG File Format

JPEG has impressive compression abilities. It can easily provide 20:1 compression of full-color data The size ratio is usually more like 4:1 in GIF. However, JPEG uses a lossy compression method, meaning that the decompressed image is not quite the same as the one with which you started. JPEG compresses images by discarding parts of the image information it considers non-essential. This lossy compression scheme results in a great degree of compression but also some degradation of the image quality, especially around sharp edges.

JPEG allows adjustments to the amount of information lost. This means that the image maker can trade off file size against output image quality; you can create very small files with low quality, or larger files with higher quality, depending on the application that your image is to serve. This is a useful feature for creating faster loading pages where perfect image quality may not be essential. When saving in JPEG format, you can specify the image quality and compression level. For the Web, there is not much difference in the quality of the image with the different compression levels, so you can experiment and save at the lowest quality which is acceptable. The more compression, the smaller the file size.

A caveat for working with JPEG is that it loses quality for successive compressions and decompressions. Because the JPEG format discards data, it is important to save JPEG files only once. Edit and save your image in a format that does not discard data (such as the Photoshop format), and save in JPEG format only as a final step. If you find that you must edit the JPEG image and save a JPEG again, be sure to use the same value of Quality or Compression EVERY time you save the file. Using different values will use different parameters that will aggravate the damage due the lossy compression.

Unlike the GIF file format, JPEGs require both compression and decompression. This means that JPEG files need to decompress when they are viewed. It takes longer to decode and view a JPEG image than a GIF. Although a GIF and a JPEG might be identical sizes, or sometimes even when the JPEG is smaller, the JPEG may take longer to download or view from a web browser because of the added time required to decompress. Thus, using JPEG is essentially a time/space tradeoff, you give up some time in order to store or transmit an image more cheaply.

Setting Height and Width HTML Tags

Put HEIGHT and WIDTH pixel dimension tags in an image. While not speeding the download time of the images, the text on a page will load more quickly if the height= and width= attributes of the tags. These attributes tell the browser how much space the image will take up, allowing it to set that area aside, download the rest of the page contents, and then return to down load the slower-loading graphic file. Users then have the chance to read-and even move on from-the page without waiting for the images to download completely. The interlacing possible with GIF, PNG, and Progressive JPEG graphics is another way to save time, quickly building up a rough version of the image that becomes "live" immediately. If it is an image map, readers can click on the graphic and be on their way as soon as they can make out its outline.

Use of the ALT Tag

Include alternate text for each image. Use the parameter in your source to specify the text to be seen by people with text-only browsers, or those who choose to turn off image display while they're browsing. This could be because they are blind and using a text-based browser or a graphical browser with the image loading feature turned off. The text description should be succinct and summarize the content or purpose of the image. The alternative text helps visitors understand what is on the page if they are not viewing the graphic. The bold text in the following example shows what an ALT attribute looks like in HTML:

Use a NULL value for unimportant graphics. Some graphical elements may add no content to a page and can be bypassed from viewing by using an ALT attribute with no text. By using just two quotation marks with no content, you can reduce the amount of distracting text when a page is viewed with graphics capabilities turned off or with a text-based browser. For example, the HTML for a divider bar could be:

Sighted visitors will see the divider bar, while those visiting via a text browser will see/hear nothing.

Conclusion

There is no single solution for all images. The best way to learn how to balance file size and image quality is to play with your images in PhotoShop (or whatever image editing program you use); try saving them in different ways and compare the results. By doing this, you' will start to get a feel for which combinations work for your set of images.

Use of Graphics to Get a Point Across

Graphic use falls into two basic categories:

• Aesthetic

• Instructional

Aesthetic graphics are placed on a web page to enhance its appearance. They may incorporate a company logo or somehow support the desired "look and feel" of a given site. They may be "attention getters" or "eye candy." Although important aesthetically, they really serve no other purpose.

Instructional graphics are placed on a web page to convey information. You may want to show what a product looks like, for example. Or, you may want to show the steps in a complicated procedure. In either case, the graphic is designed as a visual gateway to information.

Instructional graphics can be classified as

• Representational,

• Analogical, or

• Arbitrary

Representational graphics share a physical resemblance with the object they portray. For example, a text description of a given product would best be pictorially represented by a graphic of that product.

Analogical graphics show one thing that implies another thing. These are best used to introduce a new concept to the viewers by using a graphic of something they already understand. For example, you may show a picture of a book when explaining how hypertext works. It is very important that the viewers understand the analogy, or the graphic will just cause confusion.

Arbitrary graphics offer visual clues, but do not share any physical resemblance to the concept you are representing. Charts and graphs are good examples of this.

Keep these classifications in mind when designing graphics for a web page; they will help you determine relative importance of a set of graphics and help you determine when to use a graphic to its maximum advantage.

Summary

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.

A short summary of these topics are listed below. If you cannot do these things, you should review the lesson at least once. If you are still having difficulty, you should consider other sources of information that compliment this lesson, such as textbooks, tutors, and instructors.

Color Production

• Computer screen-based color is composed of projected light and pixels.

• The color of a pixel (one screen dot) is made up of three projected colors of light that mix together optically in a color system named RGB.

• A digital color image pixel is just a RGB data value (Red, Green, Blue).

• An 8-bit byte can contain one of 256 numeric values ranging from 0 to 255, thus any color can be represented by a combination of red, green, and blue values. For example, gray is represented as (126,126,126).

Bit Depth

• In color, bit depth refers to the number of colors in an image or the number of colors a computer is capable of displaying.

• 8-bit color is the most common color scheme. If you do not know the capabilities of the user's machine, 8-bit color is the safest assumption to make.

• 24-bit color is millions of colors. True photographic quality is possible.

• If you have a 16 or 24-bit image that appears on an 8-bit system, the browser will do it's best to deliver the image correctly through a process named dithering. The result may not always be pleasing.

Color Calibration

• Gamma refers to the overall brightness of a monitor display.

• 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.

• Thus, 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

Color in Browsers

• It is usually safe to assume that if a machine has color capability, it has at least 8-bit color capability. This means 256 colors can be displayed at one time.

• The question is, which 256 colors will be displayed?

• A special palette (set of colors) named the Web Palette was designed to avoid confusion.

• 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 you know you will be using 8-bit graphics, you should use the Web Palette to design those graphics.

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.

• To change the color of a background, the BODY tag is used.

• To change the color of the foreground (where text is displayed), the FONT tag is used.

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.

• A GIF image can contain up to 256 colors, and the information about these colors is stored in the image itself.

• For images that can appear well using only 256 colors or less, the GIF format is the format of choice.

• Interlaced GIFs are images that start out blocky and appear less and less blocky until they come into full focus.

• Transparent GlFs are used to remove the background color of the image, so images that are not rectangular appear better. A round button, for example, might be a transparent GIF, so you don't see the corners of the graphic.

• GIFS can be animated, using cel-based animation techniques.

The JPEG Graphic Format

• JPEGs (Joint Photographics Experts Group) contain 24-bit color information, as opposed to GIF's 8-bit scheme.

• JPEGS are best used for images where 256 colors are just not enough, or color accuracy is very important.

• JPEGs do not yet offer the universal interlacing, transparency, or animation that GIF images do, although these options are being pursued.

Other File Formats

• Progressive JPEG divides the file into a series of scans. The first scan shows the image at the equivalent of a very low quality setting, and therefore it takes very little space. Following scans gradually improve the quality (much like an interlaced GIF works).

• PNG (Portable Network Graphics) combines some of best features of GIF and JPEG. While a superior graphics technology, it is being adopted very slowly, if at all.

File Size and Optimization

• A good rule of thumb to follow with graphics is to limit the total size of all images used on a page to less than 30K.

• GIF format was uses something called the LZW compression algorithm.

• GIF does significantly better on images with only a few distinct colors, line drawings and simple cartoons.

• A GIF indexed palette can be 8 bit or less. This means you can save space by discarding the colors not used in a GIF image.

• JPEG allows you to choose the level of compression. The more compression, the greater the loss of exact detail.

Use of Graphic to Get a Point Across

• Graphic use falls into two basic categories: Aesthetic and Instructional.

• Aesthetic graphics are placed on a web page to just enhance its appearance.

• Instructional graphics are placed on a web page to convey information.

• Instructional graphics can be classified as Representational, Analogical, or Arbitrary.

• Representational graphics share a physical resemblance with the object they portray.

• Analogical graphics show one thing that implies another thing.

• Arbitrary graphics offer visual clues, but do not share any physical resemblance to the concept you are representing. Charts and graphs are good examples of this.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download