Introduction to the Web-oriented Graphics

Qinxue Chen

Creating images is one of the biggest parts of designing content for the Web. There are two popular "in-line" Web graphics formats, GIF and JPEG. They have compression bulit-in.

GIF, which stands for Graphics Interchange Format, is a lossless 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.

This image format can store black-and-white, grayscale, or color images but limited to a maximum of 256 colors (or gray shades), per image. There are two versions of GIF format. The GIF87A and the GIF89A. Most of us just call it GIF, butthe latter one has several features that the GIF87A does not has. GIF89A lets you make a transparent graphic and create an animation graphic known as Animated GIF, which are not supported by any other Web graphics format.

A big advantage using GIF format is that images can be stored in relatively small files. Access through the Internet can be very fast. GIFs are ideal for flat colour objects, and natural images that contain a fairly narrow range of tones. As the basic palette of a GIF is 256 colours, a complex image will ask Photoshop to bodge any intermediate colours. One thing GIFs are definitely not suited to is handling gradients: these nearly always appear banded no matter how carefully you adapt the image.

JPEG stands for Joint Photographic Experts Group and so anyone could easy understand that this image format has especially designed and developed for handling photographic content images. It is very good with photographs because 24-bit photographs do not dither. Unlike GIF it supports at maximum 16.7+ millions colors; an almost infinite number of colors. Like GIF it stores images in a compressed form. The images will be smaller than a GIF. JPEG has a very efficient compact digital form but unlike GIF file format, and it requires both compression and decompression. That is why JPEGs take longer to download even if the file(s) is smaller from GIF file(s). JPEG is a lossy compression method. In other words, to save space it just throws away parts of an image. The lossy compression method can generate artifacts - unwanted effects such as false colour and blockiness - if not used carefully. JPEGs are better suited to displaying natural, complex images. If on the other hand, quality isn't an issue, but size is then go for a lower quality JPEG, as it will be substantially smaller than the equivalent GIF. The trade-off is that you lose the control over the image that GIF gives you: it's less easy to specify colours and the quality can be dire.

Although GIF and JPEG are dominant there are other Web graphics formats, such as PNG or Lightning Strike compressed images. PNG (Portable Network Graphics) is an extensible file format for the lossless, portable, well-compressed storage of raster images. PNG provides a patent-free replacement for GIF and can also replace many common uses of TIFF. Indexed-color, grayscale, and truecolor images are supported, plus an optional alpha channel. Sample depths range from 1 to 16 bits.

PNG is designed to work well in online viewing applications, such as the World Wide Web, so it is fully streamable with a progressive display option. PNG is robust, providing both full file integrity checking and simple detection of common transmission errors. Also, PNG can store gamma and chromaticity data for improved color matching on heterogeneous platforms.

In HTML files, there is an option to specify the size of an image in the img tag. This means that you include the original image in the tag but can specify a smaller size for it to display. For Netscape only, you can re-size either the width or the height, and the browser will "know" how to scale the other attribute to the right proportion. IE does not do this, so just to be safe, you should determine the original pixel dimensions of the image, decide what you want the width to be, and get out your calculator to determine the proper height.

If you tell the browser to display the image at a smaller size, the browser will still be required to download the image at its full size. This takes extra time, creates a bigger load on your server, and most importantly increases the amount of limited bandwidth available to other Internet users. All graphical browsers will be able to display the tiny image, you should use an image tool to shrink the original image down to a small size, and then save the image under a new name.

With those techniques, you can put images on the web. Since your medium on which you will deliver your work is a computer screen and not any printing medium like high resolution printers, high resolution files and the Web do not go along. Usually computer screens display 72 pixels per inch, so everything you prepare on these dimensions is defined as low resolution. Everything above is defined as high resolution and it will appear at least twice in size on a monitor.

Bit-Depth is what defines how many colors your image will have. Of course the numbers of colors on the image has an enormous affect in your image's file size as well as to the image's quality. The more bits devoted to each pixel, the more colors can be displayed on the screen. 8-bit depth color resolution is suitable for Web browsers. With this resolution, the most-used 256 colors on the Web can be displayed. Using more or less than 256 colors requires other mechanisms to display, which will be discussed in the next section.

The problem with making sure that someone is seeing your picture exactly as you intended it to be viewed, stems from the fact that all computers are different. Windows users see a different set of system colors than Macintosh users who in turn see different system colors than those on Unix-based X Window System computers. The colors are frequently very similar, but differ enough to cause some difficulties.

The developers who wrote the first World Wide Web browsers realized that palettes would be different on various computers. All of the most common browsers use the same basic color palette, called the browser CLUT. Since they had to design this CLUT for use on more than one platform, the programmers left room so that the various operating systems could insert their basic system palette into this CLUT without having to lose any of the colors. The standard Web browser CLUT uses 216 colors. Those colors are the same on every Browser, Platform and Operating System and these colors are often called Browser Safe Colors, or Browser Independent. The colors other than the 216 colors are not browser safe colors. These 216 colors come from a "6x6x6" mathematical formula, calculating the 216 colors using six values each of red, green, and blue (6x6x6=216). The other 40 colors in the CLUT are left undefined so that the operating system can use its system palette.

The browser CLUT can only work if the operating system leaves at least 216 colors available. Sometimes this doesn't happen. Such is often the case with the various flavors of Unix that have more than one Window open at one time. Unlike Windows and Macintosh/OS computers, Unix allows individual programs to reserve separate sections of the palette. This means that the number of colors available varies depending on which programs are running at the time. If there are less than 216 colors, the browser will have to limit its CLUT to a smaller palette (usually using similar mathematical formulas to find the best fit for the number of colors available, such as a 125-color 5x5x5 CLUT or a 64-color 4x4x4 CLUT.)

To render colors which are not "Wed-safe", there are three ways to do it. If the image does not have any reduction color method the browser will use the nearest color of the system palette. The other is reducing colors by Dithering the image and the last one is to reduce the colors by Banding the image. Certainly by using the nearest color, quality is lost because there is no certain way of knowing what colors the browser is going to select for this process.

Dithering method is used as seen for decreasing the number of colors contained within an image. What really happens is, using a 256 color palette different color pixels are placed in the image so that it can simulate a color that does not exist. Of course the quality is not the same as before. A much better dithering method is using an adaptive palette. Adaptive palettes are created from colors relative to the image. That is from colors that exist in the image. In most cases the adaptive-based dithering method gives the best results concerning quality.

Banding is a method of reducing colors without dithering. The reduction is done by creating areas of solid color. This is a good method for images and graphics in general that contain large areas of solid color.

Other than compression, minimizing image sizes and color reduction can be used to speed up Web graphics display. The way to minimize image sizes has been presented in section 2. Color reduction has old and new ways.

The Old way includes Flat or Synthetic Images, Continuous Tone Images and Histogram Influencing.

To map the non-dithering CLUT to an existing image, first fill all of the flat-color areas with colors from the 216-color palette. Any other colors in the non-flat areas of your image will dither on some systems, which is usually fine. Now convert the image from RGB to indexed colors and load the special 216-color CLUT (Mode/Indexed Colors/Custom Palette/Dither = None). Photoshop will reduce the image to 216 colors and map the image to this palette. Of course, during this color mapping some posterization may occur.

Most full-color photographic-like images do not reduce well with the 216-color CLUT. Using an adaptive palette with diffusion dithering generally gives the best results. Adaptive palettes are tuned to the colors present in the image, and result in less dithering and a more pleasing image. On 24-bit systems, 8-bit adaptive-palette images look nearly 24-bit in quality. However, on 8-bit machines browsers will remap the adaptive palette into the client's system palette. Usually the results are acceptable.

Using an adaptive palette with diffusion dithering generally gives the best results. Adaptive palettes are tuned to the colors present in the image, and result in less dithering and a more pleasing image. On 24-bit systems, 8-bit adaptive-palette images look nearly 24-bit in quality. However, on 8-bit machines browsers will remap the adaptive palette into the client's system palette. Usually the results are acceptable.

When you index to an adaptive palette Photoshop creates a histogram of the colors in your image, ranked by popularity. Photoshop uses the histogram to determine how much weight to give certain colors in the resulting palette. For simple images, this method works well. For more complex images, Photoshop's choice of color palette may be less than optimal. A little known feature of Photoshop is that you can influence the histogram by using selections. Photoshop normally calculates the histogram using the entire image, but for more control you can select the part(s) of the image that contain the colors you want included in the palette. Photoshop weights the conversion towards the colors in the active selection(s). This technique can be used to create the absolute minimum palette for a given image.

The new way is using Human Visual System's HVS Color. HVS is a patented, psychovisual algorithm that models the way the eye perceives and masks color. HVS represents graphics in a color space that more closely matches how our eye's actually perceive color. The net effect is less discernible color banding at lower bit depths, with no dithering.

To sum up, the following is the tips to create your Web graphics with Photoshop:

1. Minimize dimension and maximize crop.

2. Minimize the initial number of colors.

3. Choose your colors from "Web-safe" colors.

4. Use aliased sans-serif fonts like Geneva, Chicago. Anti-aliasing increases the number of colors.

5. Use flat, horizontal areas of color: avoid gradations of color, especially large, gradual ones which are radial or horizontal, and have a large shift in hue and/or tint.

6. Use histogram influencing to optimize and minimize palettes.

7.Reduce the resolution to 72 dpi as your last step.

8. Turn off icons/Photoshop 2.0 support for file sizes that match the Web. Group multiple graphics into one CLUT.

9. Use multiple small graphics and/or backgrounds instead of one large graphic.

10. Choose proper Web graphics format to display on the Web.

http://www.widearea.co.uk/designer/compress.html

http://www.lynda.com/hex.html

http://www.netscapeworld.com/common/nw.color.html

http://www.aphids.com/susan/imhelp/thumb.html

http://www.netscapeworld.com/common/nw.color.html

http://www.hogent.be/chroma/ditherig.html