Google
 
Web bcot1.com

File Types and Characteristics
STILL IMAGE FILES

 

There are various types of image files. The most common file type for photographs is the .JPG file. Others are .GIF, .TIF, .BMP and .PNG. Each one is different. This page will help you understand the differences. This page will tell you where you should use each type and why certain file types are more appropriate than others for certain images.

If we create a digital image (digital photo, scanned photo, line drawing produced in some software application...), we would prefer it to always be of the highest quality (the same quality as the original file). Generally, this can be done if we are going to store the image on our computer with no need to transfer it to other computers. Even a relatively large, high quality image file takes relatively little space on your computer's hard drive. The problem is that we typically produce images with the intent to share them in some way. To prevent having to transfer large files, we need to compress them in some way.

General File Compression:
'Compression' is used with all sorts of digital files. There are 2 general types of compression. 'Lossless' compression reduces the file size but allows the decompressed file to be an exact copy of the original file (as it was before compression). 'Lossy' compression allows the file to be reproduced and the resultant file will be 'similar' to the original. There are typically several levels of compression. If you need maximum compression, for a lossy compression scheme, the resultant file will be of lower quality than the original but the file size will be relatively small. If you need really good quality, you will get a somewhat reduced file size and the quality will remain relatively good. When compressing a file we have to determine which is best for our needs.

Compression and the Different Types of Image Files:

TIF Files:
TIF files allow you to choose whether you want to use compression or not. The compression used for .tif files is lossless. Whether you compress the image or not, it will be of as high of quality as the original. Tif files are well suited for virtually any type of image but they are not supported in Internet Explorer so they would not be an option for web sites. Use .tif files if you are archiving images and you want the best quality.

JPG Files:
JPG files are compressed image files but there are different levels of compression. You select which is best for your application. Jpg files are most commonly used for photographs. They are supported by virtually every application.

GIF Files:
GIF files use a color pallette with a fixed number of colors (256 colors to be exact). Gif files are typically used where there are no gradients and/or where there is a limited number of colors (as in the orange and white example that you will see later).

BMP Files:
To date, I have found no practical use for BMP files. I would suggest that you never use them.

PNG Files:
PNG files are probably the most flexible files but are not widely supported. PNG files use lossless compression and produce relatively small file sizes. The would be perfect for the internet but, for some reason, they are not fully supported by IE. They are, however, supported by Mozilla's Firefox browser. If you want this page to function as it should (with regards to the PNG section), go download Firefox from the mozilla.org site.

Lossless Compression:
To understand lossless compression think of a novel. Let's say that someone wanted you to archive the novel (store it for later use) but space was limited and the size of the type that you could use was fixed at a given size (you couldn't cheat by using smaller text). If you typed every word just as you saw it, the archived version of the novel would be the same size as the original and that would serve any useful purpose. Now, as you can imagine, there are quite a few words in that novel that are used over and over. What if you used a single letter for the most common words? Let's look at this paragraph (actually a previous version of this paragraph) with a crude form of compression.

a b works in a couple of different ways. The highest quality b uses c b. c b does not degrade the a in any way. To understand c b think of a d. Let's say that someone wanted you to archive (store it for later e) the d but space was limited and the size of the type that you could e was fixed at a given size. If you typed every word just as you saw it, the archived version of the d would be the same size as the original and that would not work. Now, as you can imagine, there are quite a few words that are ed f and f. What if you ed a single letter for the most common words? Let's look at this paragraph with a crude form of b.

image = a
compression = b
lossless = c
novel = d
use = e
over = f

While we didn't decrease the size of the paragraph by more than about 20% but we 'did' decrease it. With the proper code, the paragraph can be reassembled to it's original form. This is lossless compression.

What if we wanted to compress it even further. It can be done by removing the words that are not necessarily needed to get the point across. If we compress the former paragraph even further by completely removing some elements we get this:

a b works in different ways. The highest b uses c b. c b does not degrade the a . To understand c b think of a d. say someone wanted you to archive (store it for later e) the d but space was limited and the size of the type that you could e was a given size. If you typed every word , the archived version of the d would be the same size as the original . Now, , there are quite a few words that are ed f and f. What if you ed a letter for the most common words? a crude form of b.

Although the last version is somewhat difficult to read, it still gets the point across. In images, the compression does the same thing. For low compression (relatively large file sizes), only the most subtle items are removed. For higher compression, more and more details are removed. At the highest compression (especially for jpg files), the image essentially a blurred version of the original.

Color Pallettes:
GIF format images use lossless compression but they have a limited color range. The image can have a maximum of 256 colors (8-bit color). This makes it a perfectly fine format for images with a limited color pallette like black and white documents or when images are drawn/produced with only a few colors (like cartoons). For photographs, the limited color pallette will prevent the image from being faithfully reproduced.

Color Depth:
The term 'color depth' refers to the number of different colors that can be produced/saved. The number is expressed as a number of bits. Lets say bits are the words in a description (this is a little different than when we discussed bits before - don't let it confuse you). The more words you can use, the better the description can be. Of course, for some things, you only need a few words and other things you need to be more specific. If you were to describe a person with only 8 words, you could only give a rough description of the person. If you could use 24 words, you would give a much better description. GIFs have an 8-bit color depth. To faithfully reproduce a photograph of a person, you would want to use 24 bits. Remember that 'bits' are actually the individual letters in a digital word. An 8-bit digital word can give a maximum of 256 variations. A 24 bit digital word can give 16,000,000+ variations (2^16 - two to the sixteenth power). There are 2 squares below. The colors are a gradient from black to red. The left image has a color depth of 24 bits. The right image has a color depth of 8 bits. If you have a good monitor and video card, you will see that the left gradient is very close to perfectly smooth and the right gradient is performed in steps. The 8-bit pallette simply does not have all of the colors necessary to properly reproduce the gradient. This would make some images with gradients (like photos) look blotchy.

In the image below, you can see that the detail is pretty good but the color range isn't quite as good as the JPG file at 100% (just below it). Look at the gradients in the dark green elements in the background. You can see that they're streaked. Also look at the light-dark gradients on the right side of the image.


GIF File Size - 194KB (194 thousand bytes)

This is essentially the same as the TIF that the scanner produced. The color range is excellent and the detail is as good as the original image. Notice the fine detail around the center parts (stamen/anther) of the flower. As you look at the files saved at ever lower resolutions (below), you can see that the quality really falls off.


JPG File Size - 308KB Quality set to 100%


JPG File Size - 38KB Quality set to 75%


JPG File Size - 23KB Quality set to 50%


JPG File Size - 15KB Quality set to 25%

Note:
The 'quality' settings on the images above are only one of several different systems of grading quality. On the program I used (Irfanview - a very cool little program) and Macromedia's Flash, they use percentages. In Adobe Photoshop, they use quality settings that range from 1 to 12. Other programs use other systems. If they system is different on the software you use, don't let it confuse you.

The next 3 images show how the .jpg format fails for some images. The image is a low color count image. The bmp and gif files are clean. The jpg file makes a mess around the edges of the text where the two color meet.

This is the BMP file. It's nice and clean but the image is 448KB in size. This would NOT be the best choice for email.

This is the GIF file. It's also clean and the image is only 7KB in size. This would be the best choice for email if you were sending a similar drawing.

This is the JPG file. It's 11KB in size. Notice all of the hash around the letters. This doesn't seem like a problem since it's still easy to read but if you had a fine line drawing, the problem may make the image useless. It's saved at a 50% quality setting.

PNG Images:
In the next 3 images you 'should be able to see how the alpha channel (used for varying levels of transparency) works. If you're using IE, it probably doesn't work properly. If you downloaded Firefox, it will properly display the PNG images on this page. I checked it in the Opera browser and it also works fine there.

This image shows the white background with the alpha set to 100% (no transparency). You can see that the background is as white and opaque as the examples above. This file is 11KB in size.

This is with the alpha set to 50%. The green background is starting to fade through. If there were some background image on this web page, you would be able to see it through the white background. This file is 14KB in size.

Here, the alpha is set to 0% (fully transparent). If your browser is working properly, you can see that the background is un-obstructed. This file is 11KB in size.

You should also notice that the text stayed nice and 'clean'. The compression left no artifacts. The resultant image was as good as the BMP file with no compression.

BMP files:
BMP files are bitmap files and are the most inefficient of all of the file types. This file format stores each pixel's information with absolutely no compression. As far as I know, compression isn't an option with bmp files. Tif files can be large but there is an option to use compression. As a example, I created a bmp image that was nothing more than a pure white background. I save it as a 24 bit format and the file size was 961KB. At 8 bits, it was 322KB. Saved as a jpg file, the size was only 6KB. As a gif, the file was a tiny 2KB. Do your friends a favor, if you have to send them an image file, send it as a jpg or gif file (whichever is more suitable for the image you're sending).

Animated Gifs:
Although this section is labeled 'still image Files', there is one that's not exactly a 'still' image. Animated gifs are a string of gif files. They are displayed one after the other and will look like a crude video. They are typically used for advertising banners (you know the awful flashing ones that drive you mad).

Transparent Gifs:
The .gif format has the ability to allow one color to become transparent. The transparency is either 0% or 100%. There's no variable transparency as in the PNG files.

REVIEW

From this page you should now know:

  • BMP files are essentially useless (in my opinion).
  • JPG files are universally the best for photos due to their ability to produce small file sizes and due to their wide support. Even large images can be emailed if they're highly compressed.
  • PNG files CAN be better than JPG files. They use lossless compression. Their sketchy support is the only real drawback. Hopefully Microsoft will support them soon.
  • TIF files are of high quality but can not be used on web pages and the compression, while lossless, may not produce small enough file sizes to allow them to be easily distributed (particularly via email).
  • GIF files are good for low color-count images or images without gradients.

  

 
 
 
 
 
 

You May Be Interested in My Other Sites
  • This site was started for pages/information that didn't fit well on my other sites. It includes topics from backing up computer files to small engine repair to 3D graphics software to basic information on diabetes.
  • This site introduces you to macro photography. Macro photography is nothing more than the photography of small objects. It can take quite a while to understand the limitations associated with this type of photography. Without help, people will struggle to get good images. Understanding what's possible and what's not possible makes the task much easier. If you need to photograph relatively small objects (6" in height/width down to a few thousandths of an inch), this site will help.
  • If you're interested in air rifles, this site will introduce you to the types of rifles available and many of the things you'll need to know to shoot accurately. It also touches on field target competition. There are links to some of the better sites and forums as well as a collection of interactive demos.
  • This site is for those who want to install or update their car stereo. It begins with the most basic electronics theory, progresses into basic transistor theory as well as covering virtually everything associated with car audio. 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Contact Me: babin_perry@yahoo.com

Copyright:
Perry Babin 2005 - Present
All Rights Reserved