Everything about Gifs

Ezine Graphic Lessons Part 1

Gif File format - Compuserve Gifs

The GIF file format was developed by Compuserve and is, sometimes, still refered to as Compuserve Gif. It uses the LZW (Limpel-Ziv and Welch) compression algorithm for 8-bit color images. It is the only image format supported by all graphical browsers.

What is 8-bit?

8-bit (28 = 256) color depth refers to the number of colors in an image. Thus, gifs can have upto 8-bit or 256 colors. Decreasing the number of colors, decreases file size. However, it might also result in dithered and/or 'blocky' images. We'll discuss these issues as we go along.

Types of Gifs

Gifs come of two varieties:

* Gif87a: This is the original gif file format. It provides interlacing feature to gifs.
* Gif89a: Developed later, the Gif89a added two more features, Animation and Transparency.

Gif compression algorithm

The LZW compression algorithm contructs a color table for an image wherein each color value is matched to a pixel. Thus, images with large areas of one color will be compressed far better than those that those that do not have such color blocks. Hence, GIFs are more suited for line art and logos than other file formats.
Also, the algorithm counts the pixel change horizontally. Therefore, images that involve horizontal color changes will be larger than those that have vertical color changes.

The GIF compression algorithm is lossless, which means that no information is lost from the original image when its converted to a gif. (Note: If your original image contains more than 256 colors, then some information will be lost. However, once converted to a gif there will not be any further loss).

We'll discuss these points in detail along with examples in sessions on optimizing GIFs.

Interlaced gifs

Interlacing is a method of diplaying images on a monitor. Interlaced images cause less flickering that non-interlaced ones. Using the interlacing method, the GIF image is brought onto the screen in a series of passes. Line numbers 0, 8, 16, ... are sent first followed by 4, 12, ..., 2, 6, 10, 14, ..., and then 1, 3, 5, 7, 9, ...

Gifs have always come with the Interlaced feature.
Non-interlaced gif images are displayed by the browser starting from the top. Interlaced Gifs, on the other hand, are displayed in a series of 4 'passes'. The first pass contains 1/8th of the image data, the second, 1/4th, the third, 1/2 and the fourth pass completes the image download.

Transparent gifs

Transparent gifs are special gif images in which one or more colors have been instructed not to be display. These instructions are passed at the time of saving the image. The "transparent" colors are, thus, not displayed and if the image is placed on a web page, the background color of the page is rendered in place of these colors.
In this article we will take a detailed look at transparent gifs from a web design point of view. Though their importance might not strike you immediately, I can assured you that would soon be facing a web design problem the solution of which lies in transparent gifs.

Remember, all images are rectangular - they have defined widths and heights. For example, you can have an image of a circle but it would actually be rectangular. The area around the circle would typically be called the background color of the image.

Displaying Transparent gifs on web pages

We have learnt that colors in an image can be made transparent so that the background (of the web page) shows through. This feature gaves additional power to web designers and helps us create lesser "blocky" pages. You should remember that images are always rectangular in shape i.e. they have width and height. However, by applying transparency intelligently, you can make the images look irregular in shape. Transparency is also utilized to give realism to many image efects such as drop shadows, glows etc.

Making transparent Gifs in Adobe PhotoShop

A transparent gif is a type of GIF image in which we set one or more colors as "transparent" or "invisible" (if you like). So if the image is placed on a web page, the background color of the page shows in areas where the transparent color exists. To make an image transparent we first take a normal gif image, open it in a graphics editor such as Adobe Photoshop, select the colors that we want as transparent and save it.

n this article I'll provide the the directions to making a transparent gif from a normal gif image. We'll will be using Adobe PhotoShop (version 5.0). If you have a later version, the steps would be similar. Remember, that the instructions of making certain colors transparent has to be passed at the time of saving the image.

Making gifs transparent is quite a simple affair. Any color in a Gif can be made transparent.

1. Open a gif image
2. Choose File - Export - GIF89a Export
3. A dialog box opens. Pick the Dropper tool.
4. Select the color which you want as transparent from either the image or the color palette.  
5. Click "OK" to save the image.

Two important points to remember when making transparent gifs

Before you move on, you must remember two important points when creating transparent gifs.
Firstly, the transparency of a color will be reflected throughout the image. You'll notice this in the above image where we have made white background transparent the teeth of the cartoon character that were also in white were made transparent.
Secondly, you can have transparency for more than one color by selecting them from the image or the palette. However, once the image is saved, there will be no differentiation between the various transparent pixels.

How to create transparency in gifs using PaintShop Pro

It is easy to create transparent Gifs in PaintShop Pro. Since transparency can be applied to the GIF file format and not JPG, we first save the image as a gif. We should also decrease the number of colors in the Gif so that the image size is optimized. Finally, we need to decide which color we want to be rendered as transparent.

Non transparent circle imageHere is what our starting image looks like. It has a pale blue background color. We will now create a transparent gif version of this image. The color that we will make as transparent is the pale blue background color.
Note: This excercise has been done using versions 7.0 and 8.0 of Paint Shop Pro and I assume that the image has been created in another program; i.e. the image was not created from scratch in PaintShop Pro.

Start PaintShop Pro and open the image (File - Open). If it's a high color image, decrease the number of colors to optimize image size.

Now select "File - Save As" (or click on the F12 key). This brings up the Image "Save As" window. Click on the "Options" button, found at the bottom of the window. (Refer visual below)
The Save As window in PaintShop Pro

The "Save Options" pop-up will open. Select the appropriate radio buttons in the "Versions" and "Interlacing" options and click on "Run Optimizer" button. (Refer visual below)

Gif save options in PaintShop Pro
PaintShop Pro version 7.0 users

On clicking the "Run Optimizer" button, you will be displayed the Gif Optimizer pop-up window (below). The first tab is Transparency and this is where we set all variables for transparency. This tab has several options; make sure that Areas that match this color radio button is selected. Transparency will be applied to the color that is displayed in the small rectangle (marked by a red border in the visual below).

The Gis Optimizer pop-up window

If this is not the color you want, click on it which, brings up the Select color from Palette window. This window displays all the colors in the image. We now select the color which we want to make transparent in our transparent gif - pale blue in our example.

The Select Color from Palette window

After you select the color, click on the "OK" button which brings you back to the Gif Optimizer window. Note the difference in the original and the result. The pale blue color has been made transparent - in fact, wherever pale blue occurs, its been made transparent.

Selecting the transparent color

Once you are satisfied with the result, click on the "OK" button and save the image.
To see your creation, place the image on a web page. If the background color of the web page is displayed in place of the transparent color, you have yourself a transparent gif image!

Creating Transparent Gifs in PaintShop Pro

Transparent gifs are special gif images in which we instruct certain color/s not to display. These color are therefore not rendered by the browser and the background color of the web page is displayed in their place. The instructions on which colors need to be "invisible" are passed at the time of creating the transparent gif image.

For example, take a look at the image below.

Gif image that is not transparentA normal gif image with no transparency. I will now create a transparent version of it and the color that I have chosen as transparent is the dark blue color. This colors occurs at two places in the image - as the color that surrounds the two square and the smaller square inside the bottom pink square.

Transparent gif imageThis is the transparent gif version created of the above image. Note: since we instructed the dark blue to be transparent, it is not displayed and in its place the background color of this web page (white) shows through. Another important point to note is that all pixels of the dark blue color that occur in the image are made transparent. Thus, even the small dark blue square inside the botton pink square is invisible.

How to create transparency in gifs using PaintShop Pro

It is easy to create transparent Gifs in PaintShop Pro. Since transparency can be applied to the GIF file format and not JPG, we first save the image as a gif. We should also decrease the number of colors in the Gif so that the image size is optimized. Finally, we need to decide which color we want to be rendered as transparent.

Non transparent circle imageHere is what our starting image looks like. It has a pale blue background color. We will now create a transparent gif version of this image. The color that we will make as transparent is the pale blue background color.
Note: This excercise has been done using versions 7.0 and 8.0 of Paint Shop Pro and I assume that the image has been created in another program; i.e. the image was not created from scratch in PaintShop Pro.

Start PaintShop Pro and open the image (File - Open). If it's a high color image, decrease the number of colors to optimize image size.

Now select "File - Save As" (or click on the F12 key). This brings up the Image "Save As" window. Click on the "Options" button, found at the bottom of the window. (Refer visual below)
The Save As window in PaintShop Pro

The "Save Options" pop-up will open. Select the appropriate radio buttons in the "Versions" and "Interlacing" options and click on "Run Optimizer" button. (Refer visual below)

Gif save options in PaintShop Pro
PaintShop Pro version 7.0 users

On clicking the "Run Optimizer" button, you will be displayed the Gif Optimizer pop-up window (below). The first tab is Transparency and this is where we set all variables for transparency. This tab has several options; make sure that Areas that match this color radio button is selected. Transparency will be applied to the color that is displayed in the small rectangle (marked by a red border in the visual below).

The Gis Optimizer pop-up window

If this is not the color you want, click on it which, brings up the Select color from Palette window. This window displays all the colors in the image. We now select the color which we want to make transparent in our transparent gif - pale blue in our example.

The Select Color from Palette window

After you select the color, click on the "OK" button which brings you back to the Gif Optimizer window. Note the difference in the original and the result. The pale blue color has been made transparent - in fact, wherever pale blue occurs, its been made transparent.

Selecting the transparent color

Once you are satisfied with the result, click on the "OK" button and save the image.
To see your creation, place the image on a web page. If the background color of the web page is displayed in place of the transparent color, you have yourself a transparent gif image!
PaintShop Pro version 8.0 users

The version 8.0 of PaintShop Pro makes it creating transparent gifs a little easier.

Once you click on the Run Optimizer button, you will be shown the Gif Optimizer pop-up window. Now you need to take your mouse cursor to the original image which would be in the work space. Once you move the mouse over the original image, you will notice that it changes to the Dropper tool. Thus, using the dropper tool, click on the color in the original image which you want as transparent and we are done!

Understanding and defining Tolerance levels when creating transparent gifs

Under the Transparency tab of the Gif Optimizer window, you would have noticed a text field for Tolerance. This allows you to set the level of "Tolerence", i.e. colors which would be similar to the color you have chosen to make transparent. For example, if we set white as a transparent color and put a value of 32 in the Tolerance text field, light shades of other colors will also be rendered transparent.
Defining transparency for Images created in PaintShop Pro

All along, we assumed that we started with a gif image. If we had created this image in PaintShop Pro to begin with, we should have used a transparent background and specified the same in "What areas of the image would you like to be transparent?" by checking the "Existing image or layer transparency" radio button in the Gif Optimizer window. (Refer below)

Image created from scratch in PaintShop ProImage created from scratch in PaintShop Pro.
Note the transparent background layer. We can simply specify that the transparency needs to be retained.

Using Existing Image or layer Transparency through the Gif Optimizer window in PaintShop Pro

Source: http://www.webdevelopersnotes.com/