Ian Fieggen Ian's Graphics Site Pixelated Graphics Icon
Ian's Graphics Site - Computer graphics information and advice from a "PixelTech"
Computer Graphics File Formats
Computer graphics file extensions The main reason for the many computer graphics file formats is their different methods of compression. Find out how the file formats compare and how to choose the right format for the best results.


Introduction to Bitmap Graphics
What is a Bitmap Graphic?
The best example of a bitmap graphic image is a photo. When scanned or photographed with a digital camera, it becomes thousands of individual dots of color called pixels (= picture elements). The image at right contains 57,600 pixels (240 wide x 240 high).

Bitmap Graphic Data:
Whoever coined the phrase -
"A picture is worth a thousand words"
- probably never realised how true this would be in relation to computer graphics. When stored as an uncompressed bitmap file, this image consumes 172,854 bytes of disk space. To put that in context, that's about 50 pages of writing (over 25,000 words)!

Bitmap Graphic Compression:
The solution for the huge amount of disk space that bitmap graphic files consume is to compress the data. The way they go about this forms the primary difference between the various graphic file formats, from the earliest formats that handled quite primitive images through to current formats that are designed for true photographic quality.
Photo sample, 240 x 240 pixels
Individual dots of color = "pixels"

Photo detail, 60 x 60 pixels


Compressing Bitmap Graphic Data
There are many ways of compressing image data. The following is a brief, non-technical description of some common compression techniques.
(RED:GREEN:GREEN:GREEN:GREEN:BLUE) -> (RED:4xGREEN:BLUE)
One simple graphic compression uses what's called "Run Length Encoding". If there are several dots of the exact same color straight after each other, the data can be compressed by storing the "Run Length" (number of dots) followed by the color value. An analogy would be a supermarket checkout, where in amongst your purchases there are 12 bottles of Coke. Rather than scanning each of them separately, the cashier can type in "12", then scan one bottle.
(RED:AMBER:GREEN:RED:AMBER:GREEN) -> (LIGHTS:LIGHTS)
Another type of compression is to use "tokens". If a group of otherwise unrelated dots is identical to a group that has been encountered earlier, the data can be compressed by saving an "abbreviation". For example, if I knew that I had to write: "Personal Computer" several times in one paragraph, I would firstly write: "Personal Computer (PC)", then subsequently use only the abbreviation: "PC".
(SKY:SKY:SKY:GRASS:GRASS:GRASS) -> (SKY:GRASS:GRASS:GRASS)
Modern image compression techniques are much more mathematically intensive, and were not really viable until computers became fast enough. They generally divide the image into small blocks (usually 8 x 8 pixels), then save only as much as is "visually" necessary. For example, if a block contained only sky, quite a bit of data could be discarded because there are only slight color variations between adjacent blue pixels. If a block contained grass, much more data would be needed because the grass is more detailed. This is like reading a document to someone and saying: "etc. etc." on the unimportant sections, then reading the important details in full.
(RUBY-RED:EMERALD-GREEN:SAPPHIRE-BLUE) -> (RED:GREEN:BLUE)
An alternative to compression is to reduce the amount of data required to store each dot. With photographic images, each dot needs three bytes of data, allowing that dot to be one of 16.7 million colors. If you reduce the number of allowable colors, you reduce the data storage needed. Two bytes of data allows for 65,536 colors, one byte allows 256 colors, whilst only half a byte is needed for 16 colors. In human terms, this is like writing a sentence with words of 5 letters or less.
Note that most compressed file formats lose some quality of the original image. If you will be working on an image (eg. retouching to remove scratches), you should save it in an uncompressed format (such as .BMP = Bitmap format) until you have completed work on it. Otherwise you will progressively lose quality each time you load and re-save the image (similar to when you make a photocopy of a photocopy).

Graphic File Extensions
Graphic file formats are mostly identified by their extensions. For example, a file called "Image.bmp" is a "BMP" (Bitmap) file, whilst another file called "Image.gif" is a "GIF" file, and another called "Image.jpg" is a "JPG" (or "JPEG") file. Besides telling us what format the data is stored within the file (ie. how it is compressed), they also tell the system what program to use with that file and therefore what icon to display for that file.
Graphic file icons and extensions
Microsoft, in their wisdom, decided that they shouldn't confuse users with such things as file extensions, so a standard installation of Windows won't display them. This can be very confusing when a folder contains two or more similar files with different extensions, as there is no easy way to differentiate between them. For example, without extensions, the three icons above would all look like they have the exact same filename: "Image".

If you will be working with different graphic files, it would be advisable to configure Windows so that all files are shown complete with their file extensions.
Ensuring Graphic File Extensions Are Displayed:
  • Windows 95:
    1. Start > Programs > Windows Explorer;
    2. Click on "View" menu and select "Options";
    3. Uncheck "Hide MS-DOS file extensions..." and click "OK".
  • Windows 98:
    1. Start > Programs > Windows Explorer;
    2. Click on "View" menu and select "Folder Options";
    3. Click on "View" tab;
    4. Uncheck "Hide file extensions for known file types" and click "OK".
  • Windows XP:
    1. Start > Programs > Windows Explorer;
    2. Click on "Tools" menu, "Folder Options" menu;
    3. Click on "View" tab and select "Options";
    4. Uncheck "Hide extensions for known file types" and click "OK".


Common Bitmap Graphic File Formats
Most of the older file formats with less efficient compression have become more or less obsolete, leaving only three formats in common use on the Internet: GIF, JPG, and more recently, PNG. This is due to their efficiency, their software support (especially web browsers), and the fact that the formats are well documented and that the image quality is well established.
GIF (pronounced "Jiff"):
The GIF file format originates back to 1987. Without getting too technical, the important features are that it handles images with a limited number of colors (up to 256) and uses a token type compression that is "lossless" (ie. when uncompressed, the resulting image is identical to the original).

Ian logo illustration Sample GIF File:
This logo image is a perfect candidate for saving as a GIF file because it contains only 11 colors, has large expanses of uniform color that are ideally suited to GIF's compression, and because this compression is lossless, we won't lose the fine lines in the process.

Sample GIF File Compression:
240 x 240 pixels, up to 16 colours;
Uncompressed bitmap file = 28,918 bytes;
Compressed GIF file = 3,447 bytes = 88% compression.

Typical Uses:
Logos, headings, buttons, borders, simple diagrams, animations.

Ian logo animated illustration Ian logo illustration with transparent background Additional Features:
In 1989, the GIF format was extended to add support for transparent areas (so that the background colour can show through) plus animation (like mini movies), both of which are used extensively on web pages.
JPG (pronounced "Jay-Peg"):
This format was developed specifically to handle photographic type images with up to 16.7 million colors. Where previous file formats rarely achieved even 40% compression, JPG regularly achieves 80 to 90% or better! This compression is "lossy" (ie. when retrieved, the image has lost some of the detail of the original), with a selectable "quality" setting, allowing a trade-off between image quality and file size.

Uluru photo Sample JPG File:
This photo is what the JPG file format was designed for. The large areas of blue sky will compress very well, although the sharp contrasts between the sky and the branches will introduce some noticeable fuzziness unless a fairly high quality setting is used.

Sample JPG File Compression:
240 x 240 pixels, up to 16.7 million colours;
Uncompressed bitmap file = 172,854 bytes;
Compressed JPG file = 26,838 bytes = 84% compression.

Typical Uses:
Photos, products, scenery, faces, textures, backgrounds.
PNG (pronounced "Ping"):
The PNG file format is the newest addition, and has only recently started to gain acceptance now that web browsers are at last starting to fully support PNG files. The format contains wide support for all sorts of images, so that (in theory) it can be used to replace both the GIF and JPG file formats. It uses lossless compression, meaning that final images will be identical to the original.

Ian logo illustration Sample PNG Files:
Either of the above typical images can be saved as PNG files, producing images identical to the equivalent GIF or JPG files.

Sample PNG File Compression - Ian Logo:
240 x 240 pixels, up to 16 colours;
Uncompressed bitmap file = 28,918 bytes;
Compressed PNG file = 2,769 bytes = 90% compression.
This works out slightly better than the equivalent GIF file's compression of 88%.

Uluru photo Sample PNG File Compression - Uluru Photo:
240 x 240 pixels, up to 16.7 million colours;
Uncompressed bitmap file = 172,854 bytes;
Compressed PNG file = 116,163 bytes = 33% compression.
This is much worse than the equivalent JPG file's compression of 84%.

There is a minor advantage in that the PNG file is identical to the original, whereas JPG files sacrifice a tiny amount of quality in order to achieve much greater compression. However, unless those microscopic differences in quality are critical, the much smaller JPG file format is usually a better option.

Uluru photo with transparent vignette Additional Features:
One of the additional features of the PNG format is Transparency (also known as "Alpha Channel"). Unlike the crude transparency of GIF files, where pixels are either totally transparent or totally solid, Alpha Channels allow pixels to be partially transparent. This allows smoother "blending" of an image over a background.

Most web browsers now support PNG transparency, but in older browsers, the nicely blended circular image at right may be contained within a greyish square.


Vector Graphics
So far this page has only covered "Bitmap" graphics, which are comprised of individual dots of color. "Vector" graphics on the other hand are fundamentally different in that they are mathematically defined images comprised of lines, curves, colored regions, text, etc. Whilst this can be a more complex way of creating an image, the result is much more versatile because it can be scaled to any resolution without loss of quality.

Ian logo illustration - Zoom area Take for example the small version of my "Ian Logo" illustration. If we were to zoom in on a portion of that logo, the results for a bitmap graphic and the same vector graphic would be quite different.
Bitmap Graphic Vector Graphic
Zoomed into Ian logo bitmap graphic
Zooming into a bitmap graphic simply enlarges the individual dots of color. The result is bigger, chunkier dots, with no additional detail.
Zoomed into Ian logo vector graphic
When zooming into a vector graphic, all of those lines are re-drawn at a higher resolution, displaying as much detail as possible.
Traditional Uses of Vector Graphics:
Because of their scalability, vector graphic formats are ideally suited to clip-art, fonts, logos, house plans, and any other image that may need to be viewed in different sizes or in very high resolution. For example, house plans are usually drawn in vector format because they are printed quite large; the same plan drawn in bitmap format would require a huge file to give the required print quality.
Vector Graphics in Web Browsers:
More recently, a new vector graphic format called SVG (Scalable Vector Graphics) has been introduced for the Internet. This format promises to make web sites better, as images can be scaled to suit various screen resolutions.

In addition, SVG files are comprised of readable text rather than binary data. This means that images in SVG format can be placed on web pages in two different ways:
Method 1: Separate SVG File
Flag of Australia in separate .SVG file
This flag image is stored in a separate file:
FlagOfAustralia.svg
The HTML code in this web page links to the image file, which the web browser downloads separately. This is the traditional way of storing images and displaying them on a web page.
Method 2: Inline SVG Image
Flag of Australia as inline SVG data
This flag image, on the other hand, has been embedded into the HTML code for the web page. This means that the browser does not have to download a separate file. Of course, if an image will be used more than once, it still makes sense to store it in an image file.
Advantages of Vector Graphics:
- Scalable to any resolution with maximum quality.
- File size often much smaller than the equivalent bitmap.
- File size is independent of the size at which the image is expected to be printed.

Disadvantages of Vector Graphics:
- More difficult to create, especially from an existing bitmap image.
- More difficult to display, thus many programs don't handle vector graphics.


Common Vector Graphic File Extensions
.AI = Adobe Illustrator
.CGM = Computer Graphics Metafile (an older "universal" format)
.CDR = CorelDraw Drawing
.DWG = AutoCAD Drawing (common format for building industry)
.DXF = AutoCAD Drawing Exchange Format
.EPS = Encapsulated PostScript (common format for publishing industry)
.PFB = Adobe Font (mainly used on Apple Macintoshes)
.SVG = Scalable Vector Graphics (latest "universal" format)
.TTF = TrueType Font (mainly used on IBM PCs)
.WPG = WordPerfect/DrawPerfect Graphic
.WMF = Windows MetaFile (Microsoft Windows' native format)
.EMF = Enhanced MetaFile

Sponsored Links