Computer Graphics File Formats

File extensions (icon)

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 enlarged

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 this is done 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 just 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 a “token” (or “abbreviation”).

An analogy would be if you had to write: “Personal Computer” several times in one paragraph, you could 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.

An analogy would be 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. Using two bytes of storage per dot allows up to 65,536 colors, one byte allows 256 colors, while only half a byte is needed for 16 colors.

An analogy would be writing a sentence using words of 5 letters or less. You may need to use tact-ics such as hyph-ens for any long-er words, but it's still read-able.

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”.
  • Windows 8:
    1. Start > File Explorer;
    2. Click on “View” tab and ensure that “File name extensions” is checked.

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 common formats in widespread use on the Internet: GIF, JPG and 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 dates 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:

• 240 × 240 pixels, up to 16 colors;

• Uncompressed bitmap file = 28,918 bytes;

• Compressed GIF file = 3,447 bytes = 88% compression.

Typical Uses

Logos, headings, buttons, borders, diagrams, charts, animations.

Additional Features Ian logo, animated (icon) Ian logo, transparent (icon)

In 1989, the GIF format was extended to add support for transparent areas (so that the background color can show through) plus animation (like mini movies), both of which are used extensively on web pages.

GIF Pronunciation

There is apparently much disagreement over whether “GIF” should be pronounced with a “hard g” (as in “gig”) or with a “soft g” (as in “gin”). I've never been in any doubt – because Compuserve told us back in 1987:

GIF (pronounced "Jif") is a mechanism of storing high-quality color graphics images in a way that can be exchanged between users of differing hardware.

– Excerpt from Compuserve announcement, 28‍-‍May‍-‍1987

You can view or download the original announcement below, which I'd downloaded from Compuserve on 31‍-‍May‍-‍1987 (just three days after GIF's debut!) and which has survived on my various different computers ever since:

WHATSGIF.TXT (text file, 4,615 bytes).

JPG (pronounced “Jay-Peg”)

The JPG file format dates back to 1992. It 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 typically 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:

• 240 × 240 pixels, up to 16.7 million colors;

• 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 dates back to 1996 and is thus the newest addition. 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 the 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 colors;

• Uncompressed bitmap file = 28,918 bytes;

• Compressed PNG file = 2,610 bytes = 91% 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 colors;

• Uncompressed bitmap file = 172,854 bytes;

• Compressed PNG file = 122,426 bytes = 29% 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 alpha channel

One of the additional features of the PNG format is an “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.

Emerging Bitmap Graphic File Formats

As computers continue to get faster, several newer processor-intensive formats have been developed that achieve higher compression and a broader range of applications. The ultimate bitmap graphic file format would be one that incorporates the best features of existing formats like GIF, JPG and PNG, outperforms each of them with better compression and/or image quality, and can thus take the place of all of them.

Some of these emerging formats include:

  • JP2 (JPEG 2000), 2000;
  • APNG (Animated Portable Network Graphics), 2004;
  • BPG (Better Portable Graphics), 2014;
  • FLIF (Free Lossless Image Format), 2015;
  • HEIF (High Efficiency Image Format), 2015;
  • WEBP (WebP), 2018;
  • JXL (JPEG XL), 2020.

As of 2024, the two formats showing the most promise are WEBP (developed by Google since 2010) and JXL (developed more recently by the Joint Photographic Experts Group). There's widespread support for JXL as the preferred choice of all major industry players – with the notable exception of Google. They're undoubtedly biased towards their own contender, in which they've invested more than ten years of development!

Ultimately, the choice comes down to the millions of people who are the ones actually adding stuff to the Internet. The long, slow process of evolution continues...

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 zoom area (icon)

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

Zooming into a vector graphic instead re-draws all of the lines 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:

Traditional Method – Separate SVG File Flag of Australia in separate .SVG file

This flag image is stored in a separate file:

flag-of-australia.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.

Alternative Method – 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 more than once, or reused 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.