Graphic File Formats

Remark: if you're not familiar yet with file-naming conventions and file-extensions, then take a moment first to read the general info about it. You can click the "related-info" button at the bottom of this page to get there.
 

Intro

Many times you'll work with images, photos, drawings and all kind of pictures on your computer; let's call them all "graphics" here (although the word "graphics" is merely used for small drawings).

Working with graphics, varying from image-design and computer aided drawing (cad) to photoprocessing images, is one of the most daring and pleasant things to do on a computer; the possibilities are nearly endless and it's also one of the computer's most powerful features.

In between here, just one note: it's often heard that graphic applications (programs) are far from cheap. And indeed, many sophisticated (and even less sophisticated...) graphic software will cost you a lot of money. To do some, merely professional and very advanced, graphic tasks, people will need such expensive software.
But you must also know that there are also many very good, and even very sophisticated graphic programs with lots of advanced functions, just for free. Remember that before buying software, also have a look at the software section on this site, you'll find some good graphic programs there.

While most kind of files only have their own file-format, graphics can be stored (saved) onto your computer in many ways. There are lots, nearly hundreds of graphic file-formats, and each of them has his own features. Some formats are application dependent and only to be used in one or more specific programs, while others are commonly used and can be opened and viewed with nearly any graphic program.

Largely spread and very common graphic formats are (among some others), the ".bmp"; ".jpg"; ".tif"; ".wmf" and ".gif" formats. As we've seen above, the three-letter combination, inclusive the point, is called the "file-extension" and here it will determinate the graphic format, the way an image will be stored onto your computer.

Example: let's say you've got a picture of your house which you named "myhouse"; then if you want to save it in the ".jpg" format, the filename becomes "myhouse.jpg". You could as well have saved the same image in another format, let's say the ".bmp" format, then the filename would have been "myhouse.bmp". The two images may look the same, but the quality may be different.

Remark: in the next paragraphs, the filename is often omitted and replaced by an asterix (*). So *.bmp stands for "[any filename]" with extension ".bmp".

Of course, there are many reasons to use all those different graphic file-formats. They each have their different possibilities of use and also some advantages and disadvantages.

In the next paragraphs, we'll discuss some of the most common graphic file-formats and their use, some "do's" and "don't 's", and we'll see how, when and why it maybe necessary to convert between the different file-formats. At the end, you find an overview with some extra info about the different formats and their use.

File-size and image quality

One of the most important differences in graphic formatting has to do with the file-size in accordance to the image quality. Simply said, a larger file can hold an image of better quality than a smaller file. It's important to understand that the file-length (how big the file is) has nothing to do here with the dimensions of the image itself.

Let's say it another way, using an example: you can have a large picture, maybe full-screen or letter-paper sized and save it as a large file (e.g. something around 950 kB or even much more). Normally you should have now a picture of (relatively) good quality. Then you could save the same picture, with the same dimensions in a much smaller file, e.g. something around 50 kB. It's obvious that some picture information must be lost now, to get that smaller file, resulting in a much lesser image quality.

Same way you could have a very small picture (small picture dimensions) saved as a large file. That picture will be (normally) of good quality.

Using techniques to make image- (and other) files smaller is called "compressing". If this compression results in an image of lower quality, we say it's a "lossy" image (compression) format.

A very common used "lossy" file-format is the *.jpg image-format (and its different types). Roughly speaking, it will take out of an image, all those fine color gradations which the human eye can't see (or is supposed by the program not to see). In practice, this will go very well, and -when used properly (see below)- the quality loss will be as good as invisible.

And as we have "lossy" formats, we have also "not lossy" (read: "not compressed") image-formats. Very common are the "*.bmp" (windows bitmap), the "*.png" and the *.tif (or : "*.tiff") image-formats. Those formats are often used by image-scanners. The provide very good image quality, and of course -more or less- large file-sizes.

But why should we do that... loosing image quality to obtain smaller file-sizes? Well, time is a factor. The larger the file, the more time it takes to open, to save, and -very important- to transport the file. Handling large files costs time. So when you plan to send an image by e-mail, or to publish it on the internet, it's important to keep an eye on the file-size, and -if necessary- to make the file-size smaller by compressing it.

As a rule of thumb, you could say that a maximum file-size of approx. 150 kB is very suitable for e-mail use. For web use, it maybe already a bit to big, but as web design is not discussed here, and 'cause there are still other ways to publish images in a user-friendly way, we leave this aside here and return to the mail.

Of course, you can mail larger files, but it's good practice to ask your correspondent about that first. Maybe she or he has a slow internet connection, and/or a mail server who won't allow to transmit large files (many mail servers set a limit a 5 MB, but always check first before sending such large files).

Moving images

Here we talk about little moving graphics, not movies. Yeah, all those small moving images you see on the internet. These are called mostly "animated gif's". Why? Well, 'cause their image format is *.gif.

A *.gif image can contain multiple images. You could see it in the same way as a cartoon movie: the different images included in the *.gif-image are shown ("played") one after the other rapidly, giving the illusion of motion.

Here's an example...

What else can the *.gif format do? Well, you can set the "transparency", that means you can set one color as transparent. That "color" will disappear and take over the color of the background into which the image is published. In the example above, you see that the background of this webpage is "shining through". Although the image is -just like all computer images- a rectangle, you don't see any image background color, for it's set to transparent (otherwise the image above will look like a bird on a e.g. blue or otherwise colored background).

Resizing Images - Raster ('bitmap') - and Vector-Formats

Of course you can resize images on a computer... but the results are not always what you expected. In fact most images can not be resized without a great loss of quality. Most of the time, it will be possible to make an image smaller without too much distortion, but making it bigger will result in a fuzzy picture. Think about it as "blowing" it up, too less image points to fill up the whole picture...

So when you take a picture, it's a good idea to start with a very large one. Afterwards you can make changes, resize it and still save it without much quality loss.

Is there a solution about this... Well, yeah, there is... but it's far from a complete solution. The reason why most images are difficult to resize, is the format in which they are saved. Most images are saved in "bitmap"-formats, such as the *.bmp and *.jpg format. The bitmap-format is a so-called "pixel-based" format, which means that every pixel of the image is described. All that information is stored and saved in the image-file, resulting in at least a fair to a very good image quality even when a compressed format is used.

But there's another way to store graphic information, not only based on the pixels building the image. It's called the vector format. A well known extension of the vector-format is "*.wmf" (Windows Meta Format).

Imagine you draw a red circle on a blue background. To save that picture in a pixel-based format, all the points (pixels) creating the circle (and the background) must be described (by color, position,...).

But we all know that you can describe a circle in a much easier and efficient way: one point in the middle, and how large the circle must be... now set a color-code and that's it. Roughly speaking, the computer must only read three values to draw the circle, instead of a description of thousands of pixels.

Such an image file will become really very small and thus very fast-loading. But now comes the best part: as the image (the circle) is created starting from some values, it's easy to change those values, and to draw a larger or smaller circle, without quality loss. Although there're some limits, it will always stay a perfect circle, or rectangle, or...

Yes, you got it...? A geometric figure, that's it. The vector format is good to describe all kinds of graphics with -more or less- geometric forms. Drawings of buildings, ships, computers... many objects can be constructed by combining geometric figures. You could think of it as the computer storing a lot of values in the filename, holding an image that will be perfectly resizeable by changing those values.

But this makes us also clear why the vector format is not suitable for photo-images. Things in real life aren't geometric at all, nature and people aren't geometric enough to get profit out of the vector format. Although there are systems in which both formats can be (partially) combined, the vector-format will mostly be used for graphics and drawings when nearly loss-less resizing is needed.

Format-Converting

File formats can be converted, e.g. a bmp-file can be converted into a jpg-file. As the bmp-file will normally be of better quality, there will be a certain quality loss in the conversion. Some image information will be lost.

Converting the jpg-image back into the bmp-format will not restore the original quality. It simply can't because part of the original information was no longer stored in the jpg-file.

So when you must convert an image or photograph to make it smaller in file-size, let's say to send it by e-mail, then remember to keep the image also in the original format on your system. Otherwise you end up with only one image of poor quality.

Also remember that each time you save an image in a compressed format (such as jpg), the quality will be reduced. When editing images, it's preferably to work with the uncompressed image-files (such as bmp). Only when all editing and processing is done, you can convert the image one time into a more convenient format.

Some common used graphic file-formats - an overview