Image File Formats.

Image File Formats

Image file formats are like eyes. Everybody has one.
There are basically two general categories. One for Vector Graphics and one for Image Arrays or bit-maps.
We will only deal with Image Arrays here.

These formats have several things in common:
Information about the image is included;
The array in encoded into Rows and Columns;
Compression techniques may be used to decrease the resulting file size.
They are called by their file extension (3 or 4 characters).

Information that is included in the file are things like:
The Resolution of the Image in DPI;
The palette of colors if it is a paletted Image;
When and what program made the image.
Comments about the image;
Etc.

Compression Techniques
There are two general categories of Image compression.
Those that loose image pixel information and those that don't.
Those that Loose information are called "Lossy".

One compression technique is called LZW. It's run length encoding.
The problem with this technique it that it is patented
and the patent was enforced after it was in wide spread use.

LZW encoding gets a pixel color then records how many pixels in a row have the same pixel color.
Records the next and so on. In rows down the page.
This is very effective on long row segments having the same color.
For example the Image with left to right shading is 13,469 bytes,
the image with top to bottom shading is 8,000 bytes.
That's because the rows have long stretches of the same color
in top to bottom shading and not in the left to right shading.

If an image is dithered "colors intermixed for the illusion of more colors". This can really reduce the effecienty of the compression.

Common Image file formats used on the Web

GIF from CompuServe.
It is a palettized format can have a color depth up to 8 bits. It is always compressed with LZW compression.
It's current version (or mutation) allows interleave, transparency and animations.
To Interlace or Not to Interlace
Arrays are typically encoded by Rows. The first row is encoded then the next row, etc.

An alternate technique is to interlace. Every 8th row is encoded. Then every 4th row, every 2nd row and then the remaining rows.
When displayed the entire image is seen very rapidly and blurry. More detail is seen as additional rows are added to the image. This is great for large pages.
Reload this page and watch the Eyeman appear.

Transparent
You can select a color from the palette and that color will not show. Whatever is behind it will show through. If you have a background it will show where the selected transparent color is in the image.

Animations
The GIF format allows a sequence of several images stored in one file. These animations can be seen on Netscape 2.0 or with a viewer.

See the Image Processing Animation It's 40 K bytes. And additional information.

JPG or JPEG From the Joint Photographic Experts Group.
There is a sliding scale of quality that can be applied when encoding an image.
However the higher the quality the larger the file size.
It is often very possible to obtain a very good image with medium quality.
It uses a lossy encoding scheme.
It keys on the fact that the human eye notices changes in luminosity better than changes in tint.
It uses up to 24 bits per pixel. 16 million colors.
The encoding is performed both horizontally and vertically.
The resulting encoding can be seen as square pattern like dithering across several pixels.
Sharply defined edges don't come out quite so sharp.
However, the overall effect on pictures is very good with a very high degree of compression.
The images can be made "progressive" like the GIF interlace feature.

Thanks gentlemen and ladies.
There are a couple of problems:
Some browsers can't handle JPEGs. In time this problem will lessen.
The format uses 16 million colors. Many displays can only show 256 colors or less.
Please see You and Your Display for more information.

Test pics that show the formats and the effects (About 150K)

TIP -- When you make an Image, keep it in a format:
That is not Lossy;
The largest image array size;
The greatest pixel depth;

TIP -- GIF is very good for graphics --
The 256 color restriction is seldom a problem.
Graphics typically has large runs of the same color. LZW compression works well.
GIF is not a Lossy file format.

TIP -- JPG is very good for pictures --
The variable quality setting allows high quality when needed and lower quality when acceptable.
The JPG allows 16 million colors. No problem with palette.
The compression factors are very high with very good results.

TIP -- Never convert a JPG to a GIF
The dithering caused by the JPG ruins the compression of the GIF

TIP -- Never convert a GIF to a JPG
The reduced palette of the GIF reduces the quality of the JPG output.

For more information about the JPG format please see this FAQ.

Other Common Image File Formats

BMP Windows Bit Mapped --
This is a full featured format allowing several pixel depths.
It allows compression

TIF Tagged Image File Format by Aldus --
This is a full featured format allowing several pixel depths.
It allows compression.
The tagging system used allows a variety of information.