Comparing two approaches to computer graphics
1. bitmapped graphics (a.k.a. raster graphics)
2. object graphics (a.k.a. vector graphics)

Bitmapped graphics treats anything you as simply coloring pixels.

Example:

Three shapes drawn using raster graphics in Microsoft Paint, you can guess the order in which they were drawn.  The "canvas" is a grid of pixels and each has a specific color.  Background color here is white.

Similar three shapes drawn using object graphics in Paint Shop Pro.  Each of the three shapes is represented internally by some specification of the corresponding object.  The triangle, for instance, is represented its color plus the grid coordinates of its three corners.

Suppose you wanted to move the RED BOX off to the right.

Here is what happens when you try to do this using bitmapped graphics.

Here is what happens when you try to do this using object graphics.

It did not work using bitmapped graphics because there is no internal representation of RED BOX.  There are just a bunch of pixels.  How would you do this operation?

It worked using object graphics because by selecting the red box you were selecting an object with its own internal representation.  The internal representation of its position is changed as you move it.

A similar effect can be accomplished in bitmapped graphics if the graphics software supports layers.  Each layer is like a transparency which can be laid on top of other layers.  Different parts of the image can be drawn on different layers.  In this case, you could draw the red box on one layer, the blue ellipse on another and place it on top, and the green triangle on yet another, placed on top of the other two.  To move the red box, just go to its layer, select the box and move it.

Suppose you want to enlarge the image.

When you enlarge the bitmapped graphics image, you get something like this:

Looks kinda "jaggy", doesn't it?  To double its size (double the height and double the width), the color of each pixel is expanded into 4 pixels (2 high, 2 wide) all the same color.  The non-vertical, non-horizontal boundaries now become more coarse.

Compare this with enlargement using object graphics:

The edges are much smoother because each object is drawn according to its internal represntation.  Making the triangle larger only changed the coordinates of its three corners.
 
 

Storing images on Disk

There are many methods for representing image data on disk.  Here's the original image again, drawn with a border around it.

Notice the image was much larger than you expected.  A lot of the canvas was not painted.

The default Microsoft Paint format is called bitmap, or .bmp, with 24 bits of storage for each pixel  (8 bits each for the red, blue, and green components of the color).  The image is 592 pixels wide by 250 pixels high, for a total of 148,000 pixels.  With 3 bytes of storage per pixel, the image requires 444,000 bytes, or 433 KB (recall that K is 1024).

The default Paint Shop Pro format stored this image in a .psp file which was 9.64 KB in size.  Requires only about 1/50th the storage as the bitmap, because it scores only the object descriptions.

The bitmap format is particularly wasteful, since so many of the pixels are the same color!  The bitmap format is so wasteful that web browsers do not even support it.

The image above is not actually a ".BMP" file but instead is a ".GIF" file.  GIF stands for Graphics Interchange Format.  The storage required for this image is 1.93 KB -- it is compressed by a factor of over 200!

Another popular format is JPEG, Joint Photographic Experts Group.  The corresponding JPEG file for this image is 5.18 KB in size.  Here it is:

NOTE:  once you store an image in GIF or JPEG format, it becomes a bitmap image even if the drawing was done using object graphics!

GIF has been extended to support simple animation by storing a sequence of bitmap images in one file.  Displaying the file causes the images to be displayed in a rotation.