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

Web Works Part 5 - GIFs 1

GIF Images
GIF (pronounced 'jiff', though many people say 'giff') images are a palette-based indexed format, constrained to a colour depth of 8 bits (or less) per pixel.

They can only contain a maximum of 256 different colours(2^8=256). The individual colours used in any particular GIF may be selected from the entire 24 bit RGB palette (approximately 16.8 million colours in total - 256 RED x 256 GREEN x 256 BLUE).

 

The GIF palette
GIF images store colour information very differently from JPEGs. GIF images each contain an internal (local) palette. The individual pixels within a GIF image simply reference (or INDEX) the internal palette in order to display a particular colour and are therefore referred to as INDEXED colour images. (See the Glossary for a more detailed explanation)

 

Additional stored information
In addition to the internal palette, GIF images also store additional information. A GIF image can describe any ONE colour within the palette as being transparent.

A comment can also be stored within the image, defining copyright, the creator or other information. GIF images may also be saved in several different formats. The most useful of these is the most recently developed, known as the 'GIF 89a' format. The 89a format allows for the creation of animations by concatenating sequential images together along with additional information about the display timing of each image and how the previous image is to be disposed.

 

GIF Formats
GIF is an abbreviation for 'Graphics Interchange Format' was originally developed by CompuServe in 1987. There are several different flavours of the GIF format.

The most useful of these was developed in 1989 and is known as the 'GIF 89a' format. The 89a format allows for the creation of animations by concatenating sequential images together along with additional information about the display timing of each image and how the previous image is to be disposed. The 89a format also allows a single colour to become transparent.

 

GIF File Size Issues - # of colours.
The first important issue concerning file size of GIF images is the total number of colours used.

A 32-colour palette is smaller than a 256-colour palette. Thus the size of the palette stored within each image affects the total size of the image. The size of the actual local palette within any GIF image is directly proportional to the number of colours. Each palette entry requires 24 bits to describe each of the 8 bit values for Red, Green and Blue. However the local palette is only described once per image and thus can only ever be a maximum size of 256x24 = 6144 bits or 6 Kb (768 bytes) in size. The size of the local palette in a gif image with 64 or fewer colours is less than 1.5 Kb (64 colours x 24 bits = 1536 bits = 1024x1.5)(remembering that 1024 bits = 1 Kb = 128 bytes).

 

 

 

GIF File Size Issues - repetitive pixel data.
Secondly, and possibly more importantly, GIF images don't merely describe each pixel linearly within the image, they store information arithmetically which helps reduce file size.

Unlike JPEGs, GIF images use a lossless compression scheme, a variant of the Lempel-Ziv Welch algorithm (LZW). The LZW algorithm is a repeating string compressor and codes linear sequences (in this case, of colour pixels) into a data dictionary. When the algorithm finds any subsequent sequences that match any already in the data dictionary, they are simply represented by the same dictionary code. The method of compression is ROW oriented and compresses GIFs by removing horizontal redundancy.

Therefore GIF images are not described pixel by pixel per se. In simple terms, the GIF image format stores a record of the number of sequential pixels using a same colour on each horizontal line of the image. Thus, the more sequential pixels using the same colour in the same row, the smaller the file size. For instance, imagine an image with a whole line (e.g. 200 pixels) of black pixels and black is the first reference in the Palette. The computer would render the image as: ' 0,0,0,0,0,0,0,0,0,0,0,0...... (up to 200)". However the GIF would store the information as 0x200, meaning 'the next 200 pixels use Palette index address 0'. Please note that this is not entirely technically accurate and merely illustrates the overall process in simplified terms.

 

Therefore, there are two main mechanisms to reduce the file size of GIF images:

  1. reduce the total number of colours, and

  2. try to use or create images with large regions of the same colour.

 

 

 

 

Real life GIF file size test in PhotoPaint
As a test, create a white image 100 pixels wide by 100 pixels high.

  • Draw a blue line close to (but not on) the left hand edge.
  • Make sure the image in 8 bit paletted format (use Image/Convert to../8 bit Paletted from the Menu) then save it as a GIF.
  • Then increase the width of the image using the same paper colour (use Image/Paper size from the Menu).
  • Increase the width to 600 pixels and place the original center-left (just like creating a background with a vertical, coloured left hand edge for a web page).
  • Save this image as a different name and then compare the file sizes.
  • Either no or very little increase in file size will occur because we are simply adding more pixels of the same colour to right hand side of the image.
  • Refer to Figure 8, Figure 9 and Figure 10 for this example.

You could use your browser to save these two images to disk and compare their file sizes.


 

Figure 8: A 100x100 pixel simple gif image.   256 colours. File size is 1,143 Bytes.



 

Figure 9: A 600x100 pixel simple gif image.
This image the same 256 colour image as that shown in Figure 8 except the width has been extended to 600 pixels (and thus is six times the size). Yet this image has a slightly smaller file size ! (1,403 Bytes).


 

Figure 10: A 600x3 x 3 colour simple gif image created from Fig 9.

The height of the image in Figure 9 has been reduced to only 3 pixels and the number of colours has been reduced to 3 also.

The file size of this image is only 109 bytes, which is much less than the number of pixels comprising the image (1800) and also includes the local palette.



 

WEB PAGE HINT:
Assume you wanted to make a simple web background image with just a coloured border down the left-hand side and the remainder as white space, and you don't want the image to repeat even on the widest screens.

  • Make the image 1600 pixels wide - it takes up exactly the same file space and bandwidth as a smaller image (e.g. only 600 pixel wide).

  • Also, using the example in Figure 10, the height of the image could also be reduced only to a few pixels as the browser will automatically tile the image vertically for you.

To create the image shown in Figure 10, he height of the image in Figure 9 was reduced to three pixels and the number of colours reduced to three. The file size of the image in Figure 10 is only 109 bytes even though it is 600W x 3H (1800) pixels in size. This is a good demonstration of the horizontal (row-wise) compression ability of GIF images.

Read the following sections on palettes and colour reduction and then try the colour reduction steps with the image in Figure 9 to re-create Figure 10.

(Note that the precise file size of any open image can be determined by viewing the Document Information (File/Document Info.. From the Menu) in PhotoPaint 8.)