ВишенкиНовости
Готовые работы
Услуги
Полезные ссылки
Глоссарий
Контактная информация
Articles about web-design

Optimization in
GIF format


Print this article
Print this article

GIF format differs from JPG and uses other methods of compression. It is intended for storage of images with an amount of colors no more than 256, uses graphic pallet of colors and lost-free compression based on LZW method.

Methods of optimization can be divided into the following types (excepting optimization of animated GIFs):

Let's sort out in order these methods and approaches of optimization.

Reducing amount of colors

For majority of images which are not being photos, the amount of colors is often less then 256. Excessive colors can be removed from an image reducing it size. Theoretically, we can assign any number of colors of the color pallet in a range of 2-256, for example, 37 colors or 101. Practically, the amount of colors in an image is selected from a series: 2, 4, 8, 16, 32, 64, 128, 256. It is because for representation of color integer bit is used, and the above series is a series of a maximum amount of colors for use from 1 to 8 bits per pixels (1bpp-8bpp). Suppose we are using only 101 colors, saving an image will be carried out with 7 bit any way. Selection of amount of colors can be based on series mentioned above. It allows receiving better picture. Compare two images shown, they are not so differ, but the left uses a full color pallet of 256 colors, and the right uses only 32 colors. And, accordingly, sizes of files approximately 2 times differ.

Full pallet (256 colors) - 7.88KB Optimized pallet (32 colors) - 3.28KB

Optimization of color pallet

Conversion of full-color image to index color (i.e. - with use of a color pallet) is an important operation, and it is worth to tell some words about how it is done by existed graphic software.

The color pallet of a final image can be either fixed, or optimized. In the first case graphic editor looks through each dot of the image and chooses nearest color from the color pallet. This mode gives the worst result from the point of view of an accuracy of reproduction of colors. Try, for example, to transform a photo of a red rose to an index image, using color pallet containing hue of green. It is, certainly, extreme case, but it will give to you understanding limitation of use of index color. Given mode is used mainly for monitors with small amount of colors (16, 256). For Web application usually so-called Netscape color pallet (or safe graphic pallet) is used, it consists from frequently used colors and tints. The Netscape graphic pallet guarantees, that images be shown the same by all browsers. For illustration of the said look at two images shown, the left uses optimized pallet, and the right - Netscape fixed graphic pallet.

Optimized pallet (256 colors) Fixed pallet Netscape (256 colors)

In the second case, when optimized graphic pallet is used, image editor at first analyzes the image and makes list of all used colors. Next, base on frequencies of emerging of colors optimized color pallet is made. After that in usual way the color for every pixel is being chosen from nearest in optimized color pallet. This approach gives much best results, and is recommended (unless you do not have other reasons using fixed graphic pallet).

At optimization of a concrete image the task is to select optimal amount of colors in the pallet. At this point to be useful to mention Dithering, method of increasing colors. Suppose, we have 16 standard pure colors, and we want lack orange color to be added. We can get it by placing red and yellow dots in a chess order. From a far our eyes will see orange color. It is a classical example of Dithering, which use gives good result in transformation of images. But from optimization of a file size point of view we get quite opposite. Dithering can increase a file size, even rather essential (it can become larger than before optimization). The matter is a method of saving images in GIF format. The image before saving to the disk is subjected to compression by LZW method. Specific of the method is that areas filled with homogeneous colors are subjected to better compression, and worse result is for set of multi-colored dots. Dithering just is based on getting missing colors by mixing existed colors. Therefore use dithering carefully and possibility do not use it thinking optimization. Two images are brought below, both use a fixed pallet, but for right picture Dithering was applied. Notice differences and pay attention to sizes of files.

Fixed Netscape pallet (256 colors) - 3.58KB Fixed Netscape pallet (256 colors) + dithering  - 4.77KB

Stylizing

To reduce amount of colors in photo images the stylizing approach can be applied. This approach includes different art filters, applying a hue, selection of a mode and a tone (like grayscale, monotone, quad tone etc.). Stylized images are compressed better and have color pallet containing less then 256 colors.

Image sizing

Following method of optimization is based on sizing images. It can not be applied to usual pictures, but it is a good pick for drawing consisting of elements of the type like line, some homogeneous area. Suppose, we need picture of black square (Malevich's square :) with 100x100 pixel size. For purpose of reducing file size we create one-pixel GIF file of black color. As usual, we insert it into the HTML-file, but size we indicate what we need (100x100). Web browser will stretch our pixel up to the required size, and we get large saving :). Similar we can use any color, but more advantage can bring transparent one-pixel GIF. With it help we can create dummy spaces, paragraph indents, to set a minimum width and height of a table and do other useful things.

This method of distortion of image size can be very handy for creating images of separating line, or stretching a line with gradient color to a rectangle. Line shown bellow is drawn by stretching width of one pixel image in HTML code.

Line created by sizing (63 bytes)

Fragmentary optimization

Fragmentary optimization is applied when we have some large image containing areas which are differ in number of colors. In this case the image can be divided on rectangle fragments placed in a table. In web browser it will look as a unit, but now each fragment of initial image we can optimize separately. For fragments containing few colors a pallet with 8 or 16 colors will be quite enough, for rich color fragments we can use full color pallet of 256 colors or save it in JPG format. This approach allows to reduce file size approximately 2-3 times (depending on a concrete image), besides, loading by fragment of the large image can look better on the screen. However, if number of fragments exceeds ten, probably we won't get advantage because each fragment should store a copy of it color pallet.

Optimization of "transparent" images

GIF format allows saving so-called "transparent" images. Actually, GIF format doesn't support transparency (alpha channel), it only allows to assign to any one color in a pallet an attribute of a transparency. When web browser draws the image on a screen, it does not print "transparent" pixel. This is not bad, but after smoothing of edges (method of anti-aliasing) a halo around the image emerges, if background color of a web page is different to color on which anti-aliasing happened. This comes because of lack of support of the alpha-channel in the GIF format. The only way to reduce this affect is assign transparent color close to future background color of the image and make anti-aliasing using future background color. For two images shown below anti-aliasing was performed on different backgrounds white and contrast dark blue, and the halo is well seen.

Anti-Aliasing on white backgound Anti-Aliasing on blue backgound

Use of not sequential image line output

Finally, one more possibility of GIF format. Version GIF89a allows not sequential image line output (interlacing). This feature intermits lines composed image, at first every 8th line shows up, then every 4th , every 2nd, and at last whole image appears. It works little bit similar to blinds. The visitor of your page can understand, what is drawn before full loading of the images. This gradual development is really good feature of GIF files and can be used very often. Two images below show difference in loading normal (on the left) and gradual developing (on the right) images.

Usual output Not sequential line output


<< Previous Article | Next Article >>