Image processing for the Internet



© LMZ


Two file formats for graphics have established themselves on the Internet. These formats—GIF and JPEG (both bitmap)—can be viewed inline by all current browsers, that is, they can be displayed in a separate window. Both formats are pixel-oriented formats. However, the strengths of both formats lie in different areas. Add to this a new and promising format, which is still under development, but which combines the advantages of GIF and JPEG: the PNG format.

The GIF format


The graphic interchange format comes from CompuServe and was developed specifically for online use. It excels through its high compression density (for comparison: bitmap files using the BMP format and featuring the same content are generally 10 to 30 times the size of GIF files).

The currently valid GIF standard is the so-called "format 89". This format offers three options which make GIF very interesting for use on the Internet:

The option of saving a file in "interlaced" format. If a graphic is saved as interlaced, it is not read and build line by line during loading, but layer by layer. This results in a blurred preview while the image is loading.
The option of saving several graphics in a single graphic file, combined with options for controlling the individual graphics. This allows for implementing animated graphics.
The option of defining a color, which is present in the graphic, as "transparent." This feature allows for defining transparent backgrounds in graphics which, in turn, can achieve very interesting effects on Internet pages.

 


Transparent image in front of grey background 

Transparent image in front of white background 

One disadvantage of the GIF format is the fact that it can only store up to 256 colors per file. In addition, converting color blending leaves something to be desired.
JPEG, which was developed by the Joint Photographic Expert Group, is a graphic format that is based on the DCT (Discrete Cosine Transformation) compression algorithm in conjunction with Huffman encoding. Since this process was originally only of importance to static graphics, the file format for images under the same name was created. In the meantime, the JPEG algorithm is also applied to videos and produced the trendsetting MPEG video format.

The JPEG graphic format also compresses very well, and compared to the GIF format, it offers the advantage of being able to store up to 16.7 million colors for each picture. Its disadvantage lies in the fact that JPEG compresses with losses, i.e., the higher the compression factor, the lower the quality of the graphic. Based on its characteristics, the JPEG format is primarily suitable for Internet-conforming storage of scanned photos, but also for other graphics featuring very detailed color blending.

The compression factor is specified when the image is stored or exported in a graphics program: The higher the compression factor, the lower the image quality. A compression factor of 5 to 10 is a useful value for good image quality.

A variant of JPEG graphics are so-called "progressive JPEG graphics." Similar to the GIF format with the "interlaced" variant, a complete, but still blurred version of the graphic is first build on the screen. The first and still blurred image can already be displayed on the screen after approx. 15% of the graphic file has been transferred to the requesting browser.

JPG2000 is a progression of JPG, which also allows for implementing animations and even stronger compression of files while maintaining quality.

The PNG format


PNG stands for Portable Network Graphic (pronounced "ping"). It is a graphic format that was designed specifically for use on the Internet. PNG is said to combine all the advantages from GIF and JPEG:

PNG compresses without losses similar to GIF.
Like JPEG, PNG supports 16.7 million colors.
Like GIF and JPEG, PNG is platform-independent.
Like GIF, PNG supports transparent background colors.
PNG allows for storing additional information in the graphics file, such as author and copyright notices.

SVG - Scalable Vector Graphics


SVG is based on vectors, whereby graphic elements such as lines and rectangles, but also text, can be displayed using an XML file. For example, the programming code for a red circle with a diameter of 30 pixels and the center position of the circle on the screen at x=100 and y=100 is as follows:

<circle cx="100" cy="100" r="15" fill="red" />

SVG graphics can only be displayed by using the corresponding plug-in.

Pixels and vectors


The two standard formats for graphics on the Internet, GIF and JPEG, are both pixel-oriented. To create demanding graphics, it is frequently better and often essential to use a vector-oriented graphics program, e.g. Illustrator, Freehand, Fireworks, Flash, etc.

Here, the image is not resolved into individual pixels and displayed, but defined as a mathematical formula (vectors). This allows vector graphics to be scalable without restrictions, and they require only a small amount of memory.

Vector programs offer the advantage of creating graphic objects, e.g. rectangles, circles, polygons or lettering, and performing object-oriented manipulations. Good vector programs offer a variety of options to manipulate graphic objects, such as 3-D effects, color blending or "waving shadows."

Forward to Image compression
Forward to Working with "IrfanView"