How to Use Corel PhotoPaint 8 to Make Web-Friendly GIF & JPEG Images

Web Works Part 6 - GIFs 2

 

Problems With 8 Bit Colour Display Cards.
People use many different types of monitors and graphics cards within their computers. The biggest problem for web designers is older computers which have 8-bit graphics cards installed and can only display 256 colours (I try hard not to even think about the horrid 16 colour EGA/VGA display computers which were the peak of technology 10 years ago).

Display cards such as this can often only display colours within the system palette, which varies between PC, Macs, Amigas etc. Thus, images containing non-system colours may not be displayed properly on some computers. Very old computers with 8-bit display cards will display the system colour closest to that referenced in the local palette of indexed colour images.

 

Dithering
When a full colour (24 bit) image is displayed on a computer with only a 256 colour display card, the computer must simulate colours it cannot display. The computer attempts to simulate additional colours by placing certain colours adjacent to each other. When viewed at a distance, the pixels of such images appear to blend together to give the appearance of a single new colour. This is called dithering. (Refer to the Glossary for a more complete description)

There are several methods to create dithered images but the best known and probably the most commonly used is Error Diffusion. This method causes images to appear dotty.

Dithering increases the amount of horizontal variation in images and therefore increases the file size of GIF images due to the row-compression behavior of the LZW compression algorithm used in these images.

 

The Netscape Palette - A Special Case.
One palette however, the 'Netscape' or 216 colour palette, has been designed so that the large majority of screen displays can render 8 bit images fairly consistently without dithering. This is because the colours within this palette are common or close to those in most of the system palettes available (PC, Mac and Unix).

The Netscape palette (Figure 11) was designed specifically for cross-platform compatibility. When examined closely it is really quite clever.

The palette consists of five equally separated colour identities from the possible range of 256 intensity variants of each primary (R, G, & B) colour space or set. Thus palette entries fall at exactly 0%, 20%, 40%, 60%, 80% and 100 % intensity levels of each of Red, Green and Blue (Refer to Table 1).

These values may then be converted into either decimal or hexadecimal equivalents for a variety of uses (columns 1 and 2 of Table 1). When used in HTML code, hexadecimal values are usually specified in tags to identify specific values for each of the R, G and B colour spaces (e.g. color="#FF0000", color="#0000FF", color="#009900" etc.).

When viewed as actual screen colours, the Netscape palette appears as in Figure 11.

Table 1 Web Safe (Netscape) Pallet Conversion Table


Hexadecimal Value Decimal Value Percentage (%)
0 0 0
33 51 20
66 102 40
99 153 60
cc 204 80
ff 255 100


 

 

Figure 11:

The 6x6 Netscape non-dithering palette for PCs and Macs


 

 

Broad compatibility
Thus, if you wish for your images to be seen as you intended them on as many different computers as possible, try to keep, or force the image into the Netscape 216 colour palette.

Once the image is in this format, further colour reduction can be undertaken if desired and the remaining pixels will still comprise this palette or a part of it (except when dithering is used).

In PhotoPaint 8, the 'Image/Convert to/Paletted (8 bit)' command is used to reduce colours. This dialog box provides access to many helpful tools and is discussed in the next section.