Understanding Computer Images

Purpose

To learn about  basic computer science concepts, vocabulary and  file formats used in working with computer images.

Overview

This lesson introduces students to basic computer science concepts and vocabulary needed for working effectively with computer images.  Students learn to interpret information about images in order to choose appropriate image manipulation techniques and file formats.  A review exercise is provided.

Topics

Scientific Visualization: 2D image processing
Mathematics: Applied Algebra

NC Scientific and Technical Visualization Objectives

Level I    3.02         Apply concepts and principles of computer file management
Level II   3.01 G     The student will identify and apply output techniques.

Tools

Calculator

Teacher Background

The focus of this exercise is on core Sci Vis vocabulary and no background science knowledge is needed.  Unlike many Scientific Visualization lessons this is not a design brief lesson but rather an explanation of terms and techniques with examples which students can carry out as they read in order to develop understanding.  This lesson will be uninteresting to students until they have worked a little with different image and presentation software and developed a need for more understanding of file formats, saving disk space, etc.  This lesson will be a good activity after students have created one or two presentations incorporating bit map images and vector graphics.

Once this lesson has been completed, it can be used as a resource for other activities involving the production of presentation images.

Basic knowledge of a 2D bitmap drawing package such as Corel PhotoPaint is assumed. The terminology used in the lesson is fairly universal across drawing packages, but may vary some.

References

Online computer dictionaries allow you to look up computer related terms.   Generally you will find  more detailed explanations with links to tutorials that explain and illustrate the terms and concepts at Webopedia found at:   http://webopedia.internet.com/ .  The FODOC ( Free Online Dictionary Of Computing ) found at http://wombat.doc.ic.ac.uk/foldoc/index.html  has shorter dedefinitions.

Other resource links:

An excellent comparitive Guide to Graphic File formats found at:
http://members.aol.com/arendsart/pages/infopgs/filetype.html

A more computer science oriented resource is File Format FAQ
http://www.faqs.org/faqs/graphics/fileformats-faq/
 

Key Terms

Understanding Computer Images

Introduction

The purpose of this lesson is to introduce the basic terms and concepts you need to know when working with computer images to create web pages, power point presentations, or images to be printed.

Types of Images

Images can be classified as either  vector graphics or as bitmaps.   You create vector graphics or line art when you create a chart in Excel or use software such as CorelDraw  which keeps track of objects such as lines, shapes, or text blocks.  These objects have properties such as color, thickness, and font which can be manipulated.  Vector graphics are sometimes also called object oriented graphics. Bitmapped (raster) images are graphic images comprised of a series of pixels (see Figure 1a).  A pixel or picture element is the basic unit of output.  They can be seen as solid rectangles when images are greatly magnified.  Each pixel will have information associated with it to determine the color and brightness.   The pixels are organized in rows, called rasters. The rasters are stacked on top of each other to create a rectilinear grid of pixels.  Each pixel is separate so you can't  pick an object in an image and move it as a whole or manipulate its properties.  Photographs and images scanned into the computer are bitmaps.  Most of the time, vector graphics must be exported into a bitmap format before they can be incorporated into a web page.

Image Size

Image size is used to refer to several different concepts in various applications.  Iit can refer to the number of pixels in a bitmapped image, it can refer to the file size - the amount of space it will take to store the image on the disk, and it can refer to the display size for a particular output device.  In this lesson we will use image size to refer to the number of pixels in a bitmapped image.  As seen in Figure 1, the image size of a bitmapped image can be described by the horizontal (H) and vertical (V) pixel count. The total number of pixels in an image is found by multiplying the horizontal and vertical pixel counts:
H x V = total pixel count

Figure 1.

Color Depth

Each pixel of the image contains unique color information.  All computer-based information including color information is stored  in binary form.   The amount of color information, color depth, is therefore described in the unit of bits. Where:
b = number of bits
2b = number of possible display colors
In a one bit image,  each pixel has either a 0 or a 1 to code color so only two colors-- black or white-- are used.  An 8-bit  image uses 8 places of binary code to code for the colors.  That allows a palette of 28 (2 to the eighth power) = 256 colors or 256 shades of gray. A 24-bit color image works with a palette of over 16.7 million colors. Since most images don't have that many pixels, and many pixels use the same color, the actual number of unique colors displayed would be substantially less than 16.7 million. Still, the image must set aside the full 24 bits of computer memory for each pixel to give it the flexibility of displaying any of those possible colors. Most images you see either have a color depth of either 8 or 24 bits.

Raw File Size

The image size combined with the color depth gives the raw file size. As seen in Figure 1b, the raw file size can be thought of as a volume. We multiply the horizontal (H) pixel count by the  vertical (V) pixel count by  the color depth (D) to get  the raw file size:
H x V x D = raw file size
Because all three of these variables are multiplied, an increase in any of the three adds to the file size.

        Example problem:
          What is the size of  an 8-bit image which is 220 horizontal pixels by 180 vertical pixels?

220 pixels x 180 pixels = 39,600 total pixels
39,600 pixels x 8 bits/pixel = 316,800 bits
This gives us the file size in bits, but computers refer to file sizes in bytes. There are 8 bits per byte, so:
316,800 bits / 8 bits/byte = 39,600 bytes
And, since most files have quite a few bytes, it is more common for rounded Kilobytes to be used.  Kilobytes may be abbreviated as K or Kb.
39,600 bytes                         = 39.6 Kilobytes = 40 Kilobytes = 40  K
1000 bytes/Kilobyte


In summary, our 8-bit image 220 horizontal pixels by 180 vertical pixels would have a raw file size of approximately 40 K.
 

Actual File Size - Compression Algorithms

The calculations we did in the last section came up with a raw file size. Raw? Why is it referred to as raw? In the example we calculated, the raw file size was quite small, with a limited color range. Many images are quite a bit larger, so compression algorithms have been developed to reduce the file size of images. For an image where no compression is used, the actual file size will equal the raw file size. When a compression algorithm is used, the actual file size will be smaller than the raw file size.

The two compression algorithms we will be using in this exercise are JPEG (also the name of the file format) and LZW. JPEG stands for Joint Photographic Experts Group and was developed to compress the kind of 'natural',continuous tone photographic images taken with cameras. It is also an example of a lossy compression technique. That is, in the process of compressing the image, information contained in pixels is discarded or lost. This process is done in a very calculated way and the missing information is not usually noticeable to the eye in rich, detailed natural scenes. LZW stands for Lempel, Ziv  and Welch, the three researchers credited with developing the algorithm. LZW is a lossless technique which means no information is actually discarded.  Instead,  areas with the same information are coded  to use less space to record the color depth.  LZW compression can be used on any kind of image, though it is most effective on line art or images with large areas of uniform (same) color.

How much smaller the compression algorithm will make the file size depends on a number of variables:

With more sophisticated compression algorithms, there are also other variables, but this gives you some rules of thumb to work with. The more experience you have with images, the better you will be able to choose  what type of algorithm to use to suit your needs.
 

Resolution

The last concept that has to be discussed before we start working with images is resolution. Here, resolution is going to refer to the translation of the digital image to a display surface such as a computer monitor or paper. Resolution refers to the number of pixels that fit in a physical space, that is, how 'big' the individual pixels are. The smaller the pixel, the smaller the physical size of the image on the screen or paper. Resolution is most commonly measured in dpi (dots per inch). In this case, dots and pixels are equivalent. The resolution of computer monitors is quite different from that of  printers. A typical computer monitor has a resolution between 72 and 100 dpi while a computer printer might range from 300 to 1200 dpi.  A higher resolution means more dots or pixels fit into a given area which means a crisper, more detailed image can be displayed.

Resolution is important because it determines the physical display size of your image. The higher the resolution, the smaller the individual pixel and, therefore, the more pixels that can be packed into a smaller area.   A higher resolution means a given  image will take up less space on the display surface. Dividing the number of pixels by the resolution will give us the display size.
 
 
Binary image size: 14x14 pixels 
Resolution: 14 dpi 
Color depth: 8 bits 

From this information we can calculate: 

Display size:  14 pixels wide/14 pixels per inch = 1 inch wide 
                     14 pixels high/ 14 pixels per inch = 1 inch high 
                     = 1 inch2

Image size:    14  x  14 = 196 pixels 

Raw file size:  196 pixels x 8 bits/pixel  = 1568 bits 
             1568 bits   = 196 bytes 
                      8 bits/byte


The same image at higher resolution		 Binary Image Size:    14 x 14 pixels 
Resolution:           28 dpi
Color depth:               8 bits 

From this information we can calculate: 

Display size: 14 pixels wide/ 28 pixels per inch = . 5 inch wide 
                    14 pixels high/  28 pixels per inch = . 5 inch high 
                     = .5 inch2

Image size:    14 x 14 = 196 pixels 

Raw file size: 196 pixels x 8 bits /pixel = 1568 bits 
            1568 bits   = 196 bytes 
                      8 bits/byte

The same image with 24 bit color

 Binary Image Size:    14 x 14 pixels 
Resolution:               28 dpi 
Color depth:         24 bits 

From this information we can calculate: 

Display size: 14 pixels wide/ 28 pixels per inch = . 5 inch wide 
                    14 pixels high/  28 pixels per inch = . 5 inch high 
                     = .5 inch2

Image size:    14 x 14 = 196 pixels 

Raw file size: 196 pixels x 24 bits /pixel = 4704 bits 
                4704 bits   = 588 bytes 
                       8 bits/byte

 
 
 

Let's  look at the width of the output when a 220 pixel wide image is displayed at 72 dpi and then at 400 dpi:

       Horizontal size of image in pixels     =  width of displayed image in inches
           Resolution

220 pixels / 72 dpi = 3.06 inches
220 pixels / 400 dpi = 0.55 inches
So an image which takes up 3 inches of your 72 dpi monitor screen screen may take up only .55 inches of a printout from your 400 dpi printer.

Similarly you can figure out the height of an image by dividing its vertical number of pixels by its resolution.

         Vertical size of image in pixels    = height of displayed image in inches
           Resolution
Some software can simulate a resolution other than one the monitor can display. For example, in page layout preview in Corel PhotoPaint, a 300 dpi image is simulated on a sheet of paper even though your monitor might only be capable of displaying 75 dpi.

File Formats

When you are saving an image you often have a choice of file formats to use.  The format you choose can determine how much space the file will occupy on your disk, whether it can be read by other programs and browsers and how good the image looks on different output media.   The following table summarizes important information about the three main image file formats we will be working with.  More information can be found by following the links in the reference section.
 
 
File Type
Stands For
Typical Uses
Not Good For
Advantages
Disadvantages
Compression
TIFF Tagged Image File Format Used extensively in the print industry for line art and continuous tone images. Also for managing scanned images Web-based images Used and supported extensively in print-based graphics software. 24-bit color support. Multiple resolution support. Non-standard with many different 'flavors'. Files can be huge if not compressed. Users can chose type of compression, including LZW.
GIF Graphic Interchange Format Web-based images using few colors: icons, line art, graphs, etc. Continuous tone images Used and supported extensively in Web-based graphics software. Lossless compression. Does not introduce 'artifacts' into the image Limited to 256 (8-bit) colors. Also limited to one resolution setting (72 dpi). LZW used on all images. One level of compression.
JPEG Joint Photographic Experts Group Digital camera images, continuous tone images for the Web Line art Used and supported extensively in both Web and print-based graphics software. Effectively compresses continuous tone images. 24-bit color support. Multiple resolution support. Lossy compression. Can introduce 'artifacts', particularly at high levels of compression and in line art. JPEG used on all images. Level of compression is variable and can be set by the user.

Interpreting File Information

Now you should be able to  make better sense of images you are opening up. Figure 2 shows the file dialogue box for Photo Paint. You can now interpret the information it is giving you about files before you open them up:


Figure 2.

This information can be used in a number of ways:

Student Assignment:

1. Explain the main difference between bitmapped images and vector images:
2.  What else are bitmap images called? (1 name)
3. What else are vector graphics called?  (2 names)
4. You are given a  continuous tone, 24 bit photographic image which is 640 pixels wide and 320  pixels high. 

a) Calculate the total number of pixels 

b) Calculate the  raw file size in bits 

c) Convert the raw file size to bytes 

d) Convert the raw file size to Kilobytes 

e)  If this image will be printed out on a 300 dpi printer how wide will it be? 

f) Would JPEG or LZW compression probably be best for this image? 

g) Which  format TIFF, JPEG or GIF would be best for displaying this image in a web page? 
 
5.  How many different colors can the computer display in an 8 bit color image?
6.   If every pixel in the image described in #4 was a different color, how many bits of color information would be needed? 
( Hint: it is somewhere between  8 and 24 bits)
7.  You are given an 8 bit grayscale image which appears to be 4 inches wide and 6 inches high  on your 72 dpi monitor. 

a) Calculate the number of pixels in this image. 

b) Calculate the raw file size for this image and convert it to Kb. 

c) How big will it be if you print it out on a 1000 dpi printer? 

d) How many shades of gray can be displayed in this image? 
 
8.  You create a color coded line graph  to display on your web page. 

a)  What type of image is this? 

b)  What file format would be best for it? 

c) Which compression algorithm would be most appropriate? 

 
9.  An 800 pixel wide image is printed out.  The width of the printed image is 2 inches.  What is the resolution of the printer?
10. Calculate the width in pixels of  an image which appears  3 inches  wide on your 72 dpi monitor.
11. A typical computer monitor displays 1024 pixels wide by  768 pixels high.  A typical laser printer can print on 7 1/2 inches of paper at 400 dpi.  If you were creating an image that needed to both fit on the screen and on the printed page would it be the printer or the computer monitor that would limit the size? 

    Top of Page                         Lesson Plan Menu

SciVisHome
















eeh 03/31/00