Basic Computer Operation Tutorial

1 of 13

http://www.bcot1.com/filetypesandcharacteristicsimagefiles.html

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:

6/30/2015 7:13 AM

Basic Computer Operation Tutorial

2 of 13

http://www.bcot1.com/filetypesandcharacteristicsimagefiles.html

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

6/30/2015 7:13 AM

Basic Computer Operation Tutorial

3 of 13

http://www.bcot1.com/filetypesandcharacteristicsimagefiles.html

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.

6/30/2015 7:13 AM

Basic Computer Operation Tutorial

4 of 13

http://www.bcot1.com/filetypesandcharacteristicsimagefiles.html

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.

6/30/2015 7:13 AM

Basic Computer Operation Tutorial

5 of 13

http://www.bcot1.com/filetypesandcharacteristicsimagefiles.html

JPG File Size - 308KB Quality set to 100%

6/30/2015 7:13 AM

Basic Computer Operation Tutorial

6 of 13

http://www.bcot1.com/filetypesandcharacteristicsimagefiles.html

JPG File Size - 38KB Quality set to 75%

6/30/2015 7:13 AM

Basic Computer Operation Tutorial

7 of 13

http://www.bcot1.com/filetypesandcharacteristicsimagefiles.html

JPG File Size - 23KB Quality set to 50%

6/30/2015 7:13 AM

Basic Computer Operation Tutorial

8 of 13

http://www.bcot1.com/filetypesandcharacteristicsimagefiles.html

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.

6/30/2015 7:13 AM

Basic Computer Operation Tutorial

9 of 13

http://www.bcot1.com/filetypesandcharacteristicsimagefiles.html

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.

6/30/2015 7:13 AM

Basic Computer Operation Tutorial

10 of 13

http://www.bcot1.com/filetypesandcharacteristicsimagefiles.html

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.

6/30/2015 7:13 AM

Basic Computer Operation Tutorial

11 of 13

http://www.bcot1.com/filetypesandcharacteristicsimagefiles.html

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

6/30/2015 7:13 AM

Basic Computer Operation Tutorial

12 of 13

http://www.bcot1.com/filetypesandcharacteristicsimagefiles.html

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

All Sorts of Stuff:
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.

6/30/2015 7:13 AM

Basic Computer Operation Tutorial

13 of 13

http://www.bcot1.com/filetypesandcharacteristicsimagefiles.html

Basic Macro Photography:

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.

Air Rifle Links and Demos:

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.

Basic Car Audio Electronics:

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

6/30/2015 7:13 AM