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
Individual dots of color = "pixels"
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.
Compressing Bitmap Graphic Data
There are many ways of compressing image data. The following is a brief, non-technical description of some common
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.
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".
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.
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, while 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, while 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:
Start > Programs > Windows Explorer;
Click on "View" menu and select "Options";
Uncheck "Hide MS-DOS file extensions..." and click "OK".
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".
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 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:
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.
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.
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
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.
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.
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.
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.
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
This flag image is stored in a separate file:
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
This flag image, on the other hand, has been embedded directly into the HTML code for the web page. This means
that the browser does not have to download a separate image file.
Of course, if an image will be used on several different pages, it still makes sense to store it in a separate image
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.