|
|
|
Computer Graphics File Formats
|
BMP
GIF
JPG
PNG |
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 into a computer, it becomes thousands of
individual dots of color called "pixels" (= picture elements). This image 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. |
Individual dots of color = "pixels"
 |
Compressing Graphic Data
To skip past this brief technical explanation, Click Here
|
(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.
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:
- Start > Programs > Windows Explorer;
- Click on "View" menu and select "Options";
- Uncheck "Hide MS-DOS file extensions..." and click "OK".
- Windows 98:
- Start > Programs > Windows Explorer;
- Click on "View" menu and select "Folder Options";
- Click on "View" tab;
- Uncheck "Hide file extensions for known file types" and click "OK".
- Windows XP:
- Start > Programs > Windows Explorer;
- Click on "Tools" menu, "Folder Options" menu;
- Click on "View" tab and select "Options";
- Uncheck "Hide extensions for known file types" and click "OK".
|
|
Common 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).
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, 16 colours (max);
Uncompressed bitmap file = 28,918 bytes;
Compressed GIF file = 3,447 bytes = 88% compression;
Typical Uses:
Logos, headings, buttons, borders, simple diagrams, animations.
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.
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, 16.7M colours (max);
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.
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, 16 colours (max);
Uncompressed bitmap file = 28,918 bytes;
Compressed PNG file = 2,769 bytes = 90% compression.
(This is slightly better than the equivalent GIF file's compression of 88%).
Sample PNG File Compression - Uluru Photo:
240 x 240 pixels, 16.7M colours (max);
Uncompressed bitmap file = 172,854 bytes;
Compressed PNG file = 116,163 bytes = 33% compression.
(This is substantially 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. Therefore, PNG is preferable only when those
microscopic differences in quality are critical, otherwise it's better to use the much smaller JPG file format.
Additional Features:
The PNG format has one additional feature: Transparency (also known as "Alpha Channel"). Unlike the crude
transparency of GIF files, where pixels are either totally transparent or totally coloured, Alpha Channels allow
pixels to be partially transparent. This allows smoother "blending" of an image over a background.
Unfortunately, not all browsers currently support PNG transparency, so the photo at right may either look like a
nice shaded circular image or it may still be contained within a greyish square.
|
|
Introduction to 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.
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 |
Zooming into a bitmap graphic simply enlarges the individual dots of color. The result is bigger, chunkier dots,
with no additional detail. |
When zooming into a vector graphic, all of those lines are re-drawn at a higher resolution, displaying as much
detail as possible from the original. |
|
Vector Graphics Usage
|
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 resolution.
Latest Use for Vector Graphics:
More recently, a new vector graphic format called SVG (Scalable Vector Graphics) has been introduced for the
Internet. This promises to make web sites better, as images can then be scaled to suit various screen resolutions.
SVG is not yet supported in many web browsers, though this is gradually starting to change.
Advantages of Vector Graphics:
- Scalable to any resolution with maximum quality.
- File size generally 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.
- Not supported in many web browsers (hence no examples on this page).
|
Common Vector Graphics 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
|
This page last updated: 01-Mar-2008. Copyright © 1999-2008 by
Ian W. Fieggen. All rights reserved.
|
|
