Computer Graphics File Formats

Info & advice on common graphics file formats

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? Photo sample, 240 × 240 pixels Photo detail, 60 × 60 pixels

A bitmap graphic (or "raster" graphic) is an image made up of rows and columns of individual dots of color called pixels (= picture elements). This example photo of Uluru is composed of a grid of 57,600 pixels (240 wide × 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 graphics 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 compression techniques.

Run Length Encoding

(RED:GREEN:GREEN:GREEN:GREEN:BLUE) → (RED:4×GREEN: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.

Token Based Encoding

(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".

Visual Detail Based Encoding

(SKY:SKY:SKY:GRASS:GRASS:GRASS) → (SKY: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 × 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.

Color Reduction

(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, 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: Most compressed file formats lose some quality of the original image. If you will be working on an image (eg. retouching to remove blemishes), 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).

Bitmap Graphic File Extensions

Bitmap files 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 the format in which 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 which 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 bitmap 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 Ian logo illustration

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

Here's the compression statistics for the sample logo at right:

• 240 × 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.

Additional Features Ian logo animated illustration Ian logo illustration with transparent background

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 Uluru photo

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

Here's the compression statistics for the sample photo at right:

• 240 × 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 despite a period of time with limited support in sub-standard web browsers, PNG is now well and truly established. The format includes 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 – Logo Ian logo illustration

Here's the compression statistics for the sample logo at right:

• 240 × 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%.

Sample PNG File Compression – Photo Uluru photo

Here's the compression statistics for the sample photo at right:

• 240 × 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 image 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.

Additional Features Uluru photo with transparent vignette

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 – an Alpha Channel allow pixels to be partially transparent. This allows smooth "blending" of an image over a background.

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

Introduction to Vector Graphics

What is a Vector Graphic?

So far this page has only covered "Bitmap" graphics, which are comprised of individual dots of color. "Vector" graphics are fundamentally different in that they are mathematically defined images comprised of lines, curves, colored regions, text, etc. While 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 following small version of my "Ian Logo" illustration. If we were to zoom into a portion of that logo, the results for a bitmap graphic and the same vector graphic would be quite different.

Zoomed-In Bitmap 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-In Vector Graphic 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.

Common Vector Graphic File Formats

Although vector graphics file formats have been around for many years – and there are several in use today (particularly in the publishing industry) – there is only one format that is currently supported by web browsers: the recently introduced SVG (= Scalable Vector Graphics) format.

SVG = Scalable Vector Graphics

The SVG format is set to make a huge impact on websites. Certain common graphic elements on web pages – such as logos, buttons, arrows, navigation elements, etc. – can be stored very compactly in SVG format. The resulting images can then be scaled to suit various screen resolutions, from compact mobiles all the way to high-resolution desktops.

In addition, the innards of 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

This second flag image, on the other hand, has been embedded directly into the HTML code of this 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 file to avoid code duplication.

Additional Features

Every element of an SVG image can be animated or otherwise manipulated on the fly by web browsers. This opens up some extraordinary possibilities – which are only now starting to be explored by web developers.

Personally, I can see enormous potential for SVG images on my Ian's Shoelace Site, where smooth animation and interactivity could render my previous static shoe lacing diagrams obsolete.

Graphics File Formats Summary

This has been a brief look at graphics file formats – focussing mainly on the predominant bitmap formats GIF, JPG and PNG, plus the more recent vector format SVG – all of which are in common use on websites. There are many other graphics file formats in use elsewhere – particularly in the publishing industry – each with their own advantages and disadvantages. I may delve into these other formats at some future date.

– Ian Fieggen, 18-Jan-2018

Sponsored Links