Images and Pixels

Representations

Digital images can be defined in two ways. Vector graphics defines parts of an image such as lines, curves, rectangles, and ovals. When images defined in this way are drawn on a computer screen or printed, they must be converted to the picture elements (pixels), the individual dots that appear on the screen or are printed. These are called pixels. Most digital images are stored directly as pixels, this is called raster graphics. Raster graphics are almost always used for photographic images.

A raster image is composed of a two-dimensional array of pixels, each of which defines what should appear at that dot in the image. The amount of storage for a pixel depends on the range of black-and-white or color defined for the image. Photographs typically use 8 bits, allowing 256 values, for black-and-white, also called gray-scale, images. They typically use 24-bits, 8 for each of Red, Green, Blue (RGB) for color images, allowing 16,777,216 colors. For very high resolution images 48 bits may be used, 16 per color. For images defined for printing, 32 bits are used, 8 each for the complementary colors Cyan, Magenta, Yellow, and Black (CMYK). Most of our work will use the RGB 24-bit images, although these are converted to CMYK for printing. In fact, there are two common versions of RGB images: sRGB (standard) is commonly used for images and for computer display; aRGB (adobe RGB) can be used in photoshop and has a wider color gamut. Files are typically tagged with the RGB that is used. When saving images for use in other software or for computer display, you should use sRGB. If you are processing and printing from photoshop, then aRGB will give you little more range of colors.

Resolution and Image Size

The resolution of an image is the number of pixels per inch (PPI) (Some authors refer to resolution as total pixels for the image, such as 1200x1600 pixels, but we will refer to this as pixel dimensions). For computer display, 72 ppi is the common standard. You would use this resolution, or possibly lower, for sending pictures to friends on the internet. For printing, 300 ppi is regarded as a standard for quality prints from a good ink-jet photo printer (many home printers give very good quality); often 150 ppi will give very good quality prints.

The basic relationship between image size, width and height in inches, image pixel dimensions, and ppi is this:

width (inches) = width(pixels) / ppi    height (inches) = height(pixels) / ppi

If you pick any two of the three specifications, you can detemine the other. For example, if your camera has given you a 1200x1600 pixel image (just under 2 mega-pixels) and you want 300 ppi for printing, then you will get a 4" x 5 1/3" image (1200/300 x 1600/300).

If you know you want an 8' x 10" print and you want 150 ppi for printing, then you will need a 1200 x 1500 (8*150 x 10*150) pixels image (1.8 mega-pixels). But if you want 300 ppi, you will need 2400 x 3000 pixels (7.2 MP). Notice that to make the linear resolution double, it takes four times the MP size of the image.

If you want to specify a 4" x 6" image and have a 800x1200 pixel image, then you will have 200 ppi (800/4 = 200 and 1200/6 = 200), reasonable for very good prints. However, if you want an 8" x 10" image from the same 800x1200 pixels, you cannot get it exactly. For width, you get 100 ppi (800/8) and for height you get 120 ppi (1200/10). This means that you must use 100 ppi and crop 1/6 of the 1200 pixel dimension to fit an 8" x 10" image. You would get relatively low quality prints.

Cropping

Most image processing software allows you to crop pictures in two ways. First is simply a rectangular crop that you control with the cursor for both width and height. The second is a crop to a specific size or proportion, such as 4x6 or 8x10, so you can set up for prints of a standard (or custom) size. In this case dragging the cursor makes the rectangle change in both dimensions, keeping the proportions correct.

When you crop an image you cut out part of it, so the new image pixel size changes. However, the pixels per inch remains the same. For example, if you have a 1800x2400 image (4.3 MP) that is 12'' x 16", it is 150 ppi. If you crop it to a 8" x 10" size, the ppi remains the same so the new image is 1200x1500 pixels. In photoshop, you can also specify a new value for ppi when you crop. If you do this, it will both crop and resample the image to change to the specified ppi.

Resizing and Resampling

Suppose you have a 3200x4000 pixel image (12.8 MP) at 8" x 10" (what is the ppi?) and you want a 4" x 5 print. You can use the resize tool to specify this. In this case you are making an image smaller with the same proportions, so it is easy. Just specify the new size and the ppi should reset to its new value. What would this new value be, if the 3200x4000 pixels are maintained?

However, if you might need to specify another image size in pixels, perhaps for display in a web page, and you want the whole image, you will need to resize to a different range of pixels. For example if you take the 3200x4000 pixel image and you want it to take about 1/4 of a computer screen at 1280x1024 (SXGA). Keeping the 4x5 proportions this could be 440x550 pixels. So 3200 pixels would need to reduce to 440 pixels and 4000 would reduce in the same ratio. This is done by resampling. An algorithm combines the pixels from the original by an averaging formula. If the resize is an easy proportion to the original, say 400x500, so every 8x8 pixel block goes into one pixel, this is easy, just average the 64 pixels from the 8x8 block to create the new single pixel. However, if the pixels do not divide evenly with the original, then a more sophisticated algorithm is need, averaging across the boundaries in some fashion. In either case, this process is called resampling. By averaging information into larger blocks (relative to the original num ber of pixels) information is lost and the resolution is lower. However, it will give the best image for the size to be displayed and should still be a quality image for the intended purpose. It also makes the file size much smaller, which is important for web applications.

Going in the other direction generally results in image degradation called pixellation. The individual pixels are increased in size and at some point the pixels begin to become visible and the image is degraded (unless you want some sort of artistic effect). This can be seen simply by zooming in on an image on your screen until you begin to see the individual pixels. Some expansion of an image can be done with algorithms that smooth the transition across pixels as they are increased, but this is limited.

Color Depth and File Size

The number of pixels in an image is one determinant of the file size for the image. There are two others determinants: the color representation and the specific file type, including compression. Here we look at color representation. The essential factor is how many bits per pixel. For a standard RGB file this would be 24 bits, 8 for each color. This is three bytes (one byte = 8 bits, bytes are the standard unit of memory size). So a 3200x4000 pixel, 12.8 million pixels (MP), and each pixel takes 3 bytes of storage, then the file for this image will take 38.4 mega-bytes (millions of bytes, or MB) (this is a very high resolution image). Depending on the type of image storage, there are other elements stored, such as information on transparency, but this is small compared to the space needed for the pixels. If the same image were stored in gray-scale (black-and-white), then it would need 8 bits, one byte per pixel and would take one-third the space, about 13 MB.

If this high resolution image were resized as indicated above to 440x550 pixels for transmission with a web page, then the file size would only be 0.726 MB. This is the reason that small images are used for computer display and transmission on the web.

Other Sources

Norman Koren on Images, Pixels, and Files

Wikipedia, Pixel

Steve Hoffman, The Home Digital Darkroom