>> Part 1: What is a Bitmap Graphic?
Part 2: What is a Vector Graphic?
Part 3: Comparing Bitmaps and Vector Graphics

Part 1: What is a bitmap graphic?

A bitmap graphic (you may occasionally hear "raster" graphic) is basically a large grid - think of a huge checkerboard, or a screen door, or any grid with a lot of little squares. If you put a different color in each little square, you can build an image square by square. When you stand far enough away from the grid, the individual grid squares blend together and you see a complete photographic image. (See Illustration 1.)

ILLUSTRATION 1:
Bitmap empty grid....	Filled with colored dots...	Enough colored dots make a photo.

This is how computer monitors and televisions work - they both are a series of little squares (pixels) in a big grid (the screen). When you specify your monitor's resolution (800x600, 1024x768 etc), you are telling the computer how many dots across by how many dots tall, and thus you define the grid that gets filled in with dots to show the image. (See Illustration 2.)

This is also how the pixel or megapixel count of a digital camera is derived: If you have a 6.3 megapixel camera, that means the files produced by the sensor (digital film) will be something like 3072x2048. Just do the math - 3072 X(times) 2048 = 6,291,456. A megapixel is a million pixels, so we get 6.29 megapixels, which is close enough to 6.3 for the marketing people.

ILLUSTRATION 2:

Computer screens, digital camera sensors and other devices rely on bitmap screens, with resolutions referred to as the "X" dimension by (x) the "Y" dimension.

Hopefully this is not huge news so far, but the important thing to get out of this is that the grid is finite, as in "of limited size." You can make a grid any size you want, but it will still be a defined size.

The quality and appearance  of a bitmap image is determined by (1) its size and (2) its resolution. In some instances, as when printing images to actual paper, "size" can refer to the number of pixels (like 800 x 600) or the physical dimensions (like 8 by 10 inches).

Resolution refers to a couple of different things in different contexts. Sometimes it references the density of pixels, and is usually expressed as Dots Per Inch (DPI). Graphics have different resolutions for different purposes, and it's important to know how you will be using the graphic. If you don't have high enough resolution and you try to print an image, it will look blocky or fuzzy. If your image is very high resolution but you use it on the web, it will take longer than necessary to download.  So what resolution, or DPI, should you choose? The traditional rule of thumb is 72 DPI for images that will only appear online and 300 dpi for images that can be commercially printed. If you are printing images at home, 200 DPI or so should give you acceptable results. Resolutions higher than 300 DPI generally will NOT give better printed results - you just get unnecessarily large file sizes. The term DPI also is seen in specifications for printer and scanners - how many dots per inch the device is capable of scanning or printing.

The term resolution is also used when referring to the overall size of a bitmap graphic, as in:

Question:"What's the resolution of that photo?"
Answer (1): "It's 2400 by 1600."
The answer could also be (2): "It's 300 dpi."
The best answer would be (3): "It's 2400 by 1600 at 300 dpi."

So, for best results you may need to know the number of pixels, the resolution, the physical size, and how the image is to be used. Especially when the images are to be printed by a commercial printer, you have to know dimensions and the DPI to ensure a quality result.

Working with and resizing bitmaps:
Bitmaps are easy to work with as long as you think ahead and know what you have to work with. Bitmaps can effectively be made smaller, but cannot be made larger without degrading the quality of the graphic. For example, if you are working with an image that is 250x250 pixels, you can shrink it to 100x100 and it will look great - there is extra information that can be discarded. However, if you want to make the image 1000x1000, Photoshop will let you do it, but the image quality will suffer. Let's see some numbers:

Original Image - 250x250: 62,500 pixels (250 * 250).

Smaller Image - 100x100: 10,000 pixels (100 * 100) - Photoshop can discard 52,500 pixels and still have all the information needed to make the 100x100 image.

Larger Image - 1000x1000: 1,000,000 pixels (1000 * 1000) - Photoshop can make a grid of 1000x1000 pixels, but what should go in them? There are 62,500 pixels to work with, but that leaves 937,500 pixels unaccounted for! That's 15 times what we have to work with. To compensate, Photoshop will interpolate to create the missing data. That means it will look at what it has to work with and create a best guess as to what is needed. It actually does a remarkably good job, but the image may well suffer noticeably if you increase the image size more that 10 percent or so.

To avoid this damaging interpolation, one needs to think ahead and create a document as large or larger than will ever be needed. That way you can shrink the graphic to any size you need, and it will always look great. If you have files from a digital camera, start with the largest size and work down, then keep the larger original someplace where you can come back to it

One word of caution - if you make an image smaller in Photoshop, that information is gone. You cannot resize the image back to its original size and get your original image. (See Illustration 3.) For instance, you have a 250x250 image and you use "Image Size" to drop the size to 75x75. Since you are making the graphic smaller, Photoshop dumps the information that is no longer needed. ((250 X 250) - (75 X 75) = (62,500 - 5,625) = 56,875 discarded pixels). If you then change your mind and use "Image Size" to put the size back to 250x250, Photoshop DOES NOT go back to what you started with - it will take that 5,625 pixels you're left with and guess (interpolate) the other 56,875, leaving you with a badly degraded image. With any luck, you didn't save and close the file, so you can "Revert" to get back to the original or go back in your history palette to a state before you resized the first time.

ILLUSTRATION 3:
Original at 250x250...	Resize to 75x75 - still looks good.
Changed mind and sized back to 250x250. Photoshop interpolates up, image loses lots of detail.	Here is a comparison at 200% magnification to show loss.

Some advantages of bitmap graphics:
- Bitmaps can represent complex, photographic images. The grid can be filled with thousands or millions of subtle variations of color to recreate the complexity found in the world around us.

- Bitmaps are quite universal - almost any program can work with simple bitmap file formats, and they require little system overhead to properly display.

Some disadvantages of bitmap:
- Since you have a finite amount of information, bitmaps are not effectively scaleable to larger sizes. You can increase the size of the image, but there is no information to occupy the space so the software interpolates to create a best guess.

ILLUSTRATION 4:

To save the file, the computer needs to record the color of X1Y1, then X2Y1, then X3Y1, etc., until the entire grid, possibly millions of squares, has been recorded.

- Bitmap file sizes can get quite large, especially if not compressed in some way. Depending on the resolution of the bitmap graphic, it can require lots of information to record the contents of the grid. Each little square in the grid has an X and Y coordinate, and the computer has to record which of the thousands or millions of color choices is present for each square. Illustration 4 has 16 little squares, but a typical bitmap can have millions of squares to record. This can chew up a lot of information.

- Bitmaps do not maintain editability. You cannot open a typical (non-Photoshop format) bitmap file and modify it as though you were the originator - there is no layer or other information in most bitmap files (TIFF, PICT, JPEG, etc...).

Bitmap formats:
Some of the most prominent bitmap formats are: TIFF (.tif), BMP (.bmp), PICT (.pct), GIF (.gif), JPEG (.jpg). There are others as well. Photoshop's native PSD format used to be bitmap only, but now has support for text and vector layers as well.

Move on to Part 2: What is a Vector Graphic?