A magnified portion of a digital image.

A magnified portion of a printed image.

Structure

The first step to understanding a raster image is to zoom into a digital image to peek at the grid structure. Each little square I see is one pixel. Each pixel is a single color. Taken together, these thousands or millions of tiny color squares blend together in my mind to form an image.

Images on a printed page trick my brain in the same way. If I were to take a magnifying glass and look up close at a printed image, I would see tiny individual dots of color. Graphic designers use a special kind of magnifying glass to examine the dots, called a loupe (pronounced "loop"). When viewed with the naked eye, these dots blend together to form a seamless picture.

The number of little squares in an image is determined by the size of the grid. An image that is 1024 x 768 pixels, a common size for a desktop background, has 786,432 total pixels (that is: 1,024 columns of pixels multiplied by 768 rows of pixels). The number of pixels in an image is directly related to its resolution, discussed in the next section.

A square inch of my photo at 300 ppi.

A square inch of my photo at 30 ppi.

Size and Resolution

One of the more difficult concepts to understand when discussing raster images is the relationship between number of pixels and the physical size of the image when it is printed. Pixels are square, but a pixel does not have a set printed height and width.

The crucial concept connecting the digital image and the printed image is resolution. In the U.S., the resolution of an image is defined as the number of pixels per inch, and is commonly abbreviated "ppi". Printed size, number of pixels, and resolution are interconnected.

Let's say I have a photograph that is 900 pixels by 1,200 pixels. I print the photo to my printer. When it comes out, the image is 3 inches by 4 inches. The resolution of the image is 300 ppi, that is, there are 300 pixels for every inch of printed image. A resolution of 300 ppi produces a decent printed photograph through a home printer.

Now, let's say I want to use this same photo on a poster I'm making. I print the photo to my printer, but this time I tell my printer to make the photo 30 inches by 40 inches. The photograph itself hasn't changed, but the resolution of the printed image is now 30 ppi. Instead of 300 pixels for every inch, there are now only 30. The individual pixels are printed large enough for me to see with the naked eye. This causes the edges between colors in the photo to look jagged, or pixelated.

The RGB Model—3 spotlights of color.

The CMYK Model—3+1 ink dots of color.

Color

Color in a raster image can be a tricky subject. Color is color, how hard can that be, right? But there's more…

There are many different models of color, or ways of looking at color. Most models are only relevant to designers and their professional kin, but there are two common color models that pop up for non-designers. The first is the Red-Green-Blue model, commonly abbreviated RGB. The second is the Cyan-Magenta-Yellow-Black, abbreviated CMYK. These models, in addition to being the most common, are two sides of the same coin.

Let's examine the RGB model first. It is the model used for all color displayed through computer monitors and television screens. Each color the screen displays is made of different intensities of three base colors of light, which are, you guessed it: red, green, and blue.

The RGB color model is called an additive model. The intensities of red, green, and blue lights add together to form a color. The brighter the red, green, and blue lights, the brighter the resulting color. When all three lights are at their brightest, I see white. When all three lights are turned off, I see black (the color of the screen).

The CMYK model is used for printed colors, and these colors are made of different amounts of cyan, magenta, yellow, and black ink. Black is abbreviated as "K", which stands for "key color", avoiding confusion with the color blue.

The CMYK model is a subtractive model. The more color ink that is added to an area, the darker the resulting color becomes. When all colors are layered 100%, I see black. When no color is present, I see white (or the color of the paper).

In a perfect setting, layering 100% of cyan, magenta, and yellow together produces solid black. But in the real world, the black produced by layering the three color inks is dull, so printers add a true black ink on top of these areas to deepen the effect. The black that is made of all four ink colors is called "rich black".

These two models are intimately linked. When I layer 100% cyan ink on top of 100% magenta ink, the resulting color is "royal blue", the same blue in the RGB model. Combining 100% of magenta and yellow produces red, and 100% of yellow and cyan produces green.

The Pros and Cons

Choosing to create a picture as a raster image or a vector image requires knowledge of the advantages and disadvantages of each format.

The biggest advantage to using a raster image is the format's ability to easily render photorealistic images, which is something difficult and time-consuming to accomplish in a vector format. It takes a digital camera less than a second to create a realistic raster image of an apple, but can take an artist many hours to create a realistic vector image of the same apple.

The most glaring downside to using a raster image is the loss of edge quality when the image is resized. A digital photograph of my sister may look great when I print it at home, but looks blurry and indistinct when it is printed on a sign, due to the pixelation that occurs at the smaller ppi.

Another consideration when working with raster images is the file size of the image. In a raster image, the file needs to remember the color of each individual pixel, and the number of pixels can reach in the millions. Where a vector image may only be 100 KB, a similar raster image may be 100 MB, which is one thousand times larger. The larger files require more computer resources—hard drive space, memory, etc.—to manage.

In Closing

I've only just touched on raster images with this article to give non-designers a taste of the format. If you'd like to explore further, check out Lynda.com, which is a fabulous training site. They have excellent training videos, some for free and some through a subscription. Or, pick up one of the excellent Classroom in a Book books, which are written by the Adobe team, and a trial copy of Photoshop, Adobe's raster image editing program, to really get your feet wet.