Design Resources

The Graphic Format
On the Internet, two different image file formats are used for the majority of images: GIF and JPEG. Graphics programs can convert pictures from GIF to JPEG. The primary difference is compression type. Note: The GIF-Format is more suitable for graphics such as surface textures, logos, etc. The JPEG-Format is more suitable for photographs.

GIF
GIF stands for Graphics Interchange Format - It is widely used online due to the high compression performance it employs. Due to copyright problems with the GIF format, the professional world is in search of an alternative to the GIF format. Specifically, there is the new format, PNG, which is not supported by browsers at this point in time. For this reason, the GIF format is still used on the Internet without considerable competition.

The compression performance of the GIF format is based on the LZW algorithm (named after the developers Lempel, Ziv, Welch), which is also used for the compression of other files. Through the LZW-method, all repetitions of byte samples are coded and stored to save space. Therefore, the GIF format achieves the best compression rates if the picture has larger single-colored surfaces or repeated patterns. GIF format achieves bad rates, however, for pictures with color processes.

You can determine a "transparent " color and then place pictures in the " Interlaced" mode. Additionally, you can store a series of single pictures in a GIF file (this is how the GIF animations are implemented). The GIF format stores pictures with the maximum of 256 different colors. An image-processing program, which creates the GIF format, must first reduce the picture to a pallet of 256 colors. The number of different colors, however, still does not state which colors of the complete color space are intended.

This can differ with each GIF picture. In most pictures certain colors prevail strongly, consequently, the reduction to 256 colors does not noticeably degrade the quality during the screen display. The color palette of a green meadow with white flowers, for example, will contain many green tones, some white or gray tones and practically no blue, red or yellow tones.

Interlaced GIF
Interlaced GIF information in the interlaced mode is not sequentially stored, rather first the first line , then the eighth and so on. Afterwards, the second line, the ninth etc.. In this way a rough version of the picture becomes visible with the display of an interlaced GIF picture after a short time.

Transparency
Impressive background effects can be designed using pictures that are not simply rectangular, but outlined with irregular or rounded, smooth shapes. This is achieved by defining certain colors as "transparent". Transparency can be specified in most graphics programs.

Mini-Animations
Small animations are commonly found on web sites. Using the GIF format several pictures can be stored in one file. A special program displays the pictures one after another on the monitor, thus creating animation. Such a display function is included in the current versions of Netscape and Explorer

JPEG (or JPG)
The JPEG format was developed by the Joint Photographers Expert Group. The JPEG compression does not operate completely loss-free. However, it tries to remove, using a mathematical analysis procedure, the information from the picture that is not relevant for the image quality. In this way the JPEG procedure, without visible degradation in quality, often achieves very high compression rates.

The JPEG algorithm only operates on the basis of real color pictures (True Color = 16 million colors). The user can indicate the desired compression rate before the conversion. The higher the value, the more the quality is degraded. A general specification for the ideal compression rate cannot be made because the level is dependent on user motive and image content. Trial and error is the only way to find the ideal setting for each image.

Which tool to use?
Every HTML designer needs some tools for picture manipulation. Traditionally Adobe Photoshop has been the king of image tools, and Photoshop 6 is no exception - a powerful tool with hundreds of functions. Corel is another popular tool at this same level. Paint Shop Pro is another good choice, and is considerably less expensive than these programs. Take a look at the company sites, and try them out - each offers a trial download version for your review:

• Adobe - Photoshop
  
• Corel - Paint
  
• Jasc - Paint Shop Pro

HTML Tricks
The most important property of an internet graphic is its loading time. The most beautiful homepage is useless if everyone aborts the loading procedure because it takes too long.

Note: Graphics should never be bigger than needed.
Using the HEIGHT and WIDTH attributes of the IMG -tags, the dimensions of a picture can be controlled. If only one of the two attributes is specified, the browser adapts in such a way that the aspect ratio of the figure is maintained. An enlargement entails a degradation in quality. If a reduction becomes necessary, then the original picture is obviously too large. In this case, the picture should be reduced using a graphical editor. This will reduce the amount of memory the picture requires.

Cache
Once a picture has been loaded, the browser keeps the picture in cache and it is not necessary for the server to read the file again if the same page is visited. This means that a picture already transferred can be used several times, without increasing the data transfer time. This applies to the use of the same picture on multiple HTML pages. If you equip all documents of your site for example with a logo or with a recurring graphic, the image files concerned will only be retrieved once while actually being displayed several times.

Shorten the Download Time
In order to represent the layout of an HTML page, the browser needs information about the size of the used pictures. If the actual sizes of the pictures are indicated using HEIGHT and WIDTH, then the dimension of the picture area is already known after the transfer of the HTML code. This allows the browser to calculate the layout of the page before all the pictures are read. Without the specification of the dimension of a picture, the browser has to read all the pictures before the final page appears.

This technique allows the visitor to read the text on the site while the browser is loading the pictures.