×

# Imaging 101

1. Terminology

a. Pixel

The word pixel is based on a contraction of pix (“pictures”) and el (for “element”). In digital imaging, a pixel is a physical point in a raster image, or the smallest, addressable element in a display device.

A pixel is generally thought of as the smallest single component of a digital image.

b. Resolution

When one talks about resolution, he might refer to one of the following things:

i. Device  resolution

The resolution of an output device such as a monitor or printer is measured by the number of individual dots that can be placed in a line within the span of 1 inch (2.54 cm), or in short, dots per inch (DPI).

ii.      Screen resolution

The display resolution of a digital television or display device is the number of distinct pixels in each dimension that can be displayed.

Pixel count of width by height

when the pixel counts are referred to as resolution, the convention is to describe the pixel resolution with the set of two positive integer numbers, where the first number is the number of pixel columns (width) and the second is the number of pixel rows (height), for example as 640 by 480.

For example, we can adjust our PC screen resolution to 1280*720.

Total number of pixels in one image

Another popular convention is to cite resolution as the total number of pixels in the image, typically given as number of megapixels, which can be calculated by multiplying pixel columns by pixel rows and dividing by one million. For example, the resolution of one camera lens is 700 MB.

iii.      Image resolution

For a digital image, Pixel per inch (PPI) describes pixels per length unit or pixels per area unit, such as pixels per inch or per square inch.

The higher the PPI, the better the image quality is.

iv.      Scanning resolution

As mentioned, DPI refers to the physical dot density of an image when it is reproduced as a real physical entity, for example printed onto paper, or displayed on a monitor. A digitally stored image has no inherent physical dimensions, measured in inches or centimeters. Thus it has no DPI. Its quality is labeled with PPI.

In the case of scanned images, the digital file formats records the DPI value, which is the size of the original scanned object, as its PPI (pixels per inch) value.

The value can be used when printing the image. It lets the printer know the intended size of the image.

For example, a bitmap image may measure 1,000 × 1,000 pixels, a resolution of 1 megapixels. If it is labeled as 250 PPI, that is an instruction to the printer to print it at a size of 4 × 4 inches. Changing the PPI value would not change the size of the image in pixels which would still be 1,000 × 1,000.

Bit Resolution, Bit Depth & Pixel Type

Color depth or bit depth is the number of bits used to indicate the color of a single pixel in a bitmapped image. This concept is also known as bits per pixel (bpp), particularly when specified along with the number of bits used. It is the measurement of how many colors, or shades of grey, that an image has. The number is based on how many bits of data are used to store color data for each pixel of an image.

Obviously, as the number of bits used to store color information increases, the number of colors that can be presented also increases, but it does so exponentially.

A one bit image would use a single bit of data for each pixel, creating an image that was made up of only two colors, usually black and white. An eight bit (or one byte) image would have 256 (28) possible colors, which might be 256 shades of gray in a grayscale image or a limited 256 color palate in an image saved in the GIF file format.

A 24 bit (or three byte) would have a total of 16,777,216 possible colors. Most 24 bit images are made up of three eight bit channels as part of the RGB color model. RGB images are made up of 256 shades of red, 256 shades of green, and 256 shades of blue for a total of 16,777,216 color combinations (256 x 256 x256 or 224). When the bit depth is 24 bit or higher, it is also known as Truecolor (called Millions on a Macintosh) because it represents a significant portion of the range of colors visible to the human eye.

Higher color depth gives a broader range of distinct colors.

1-bit color (21 = 2 colors) – often black and white

2-bit color (22 = 4 colors) - gray-scale

24-bit color (224 = 16,777,216) – true color; the human eye is capable of discriminating among as many as ten million colors.

2. File Format/Compression

a. Vector graphics vs. Raster images

There are two different types of images used by graph design programs: raster images (sometimes called “bitmap”) and vector-based images.

A raster image is made of thousands of little dots, or pixels.

Creating or editing an image with dots allows you to provide for rich detail in an image. Because every dot can be a different color, you can allow for any kind of color change. Raster images are wonderful for rendering rich, full-color images, like photographs. Raster-based programs do have some drawbacks, though:

• Raster images are file-heavy. All of the zeros and ones that are used to make up each pixel result in large files sizes.
• Rasters do not resize well. When you resize a raster image, the pixels just get larger, making the image appear distorted and chunky/grainy.

Photo editors, like Adobe PhotoShop, use raster-based images to allow for precise editing and total freedom in image appearance. Vector-based programs approach image creation in an entirely different manner. A vector-based program does not render images on a pixel-by-pixel basis.

In a raster-based image creation program, a square would be made of thousands of pixel dots.

In a vector-based program, the same square would be made of only four dots, one on each corner. These “vector points,” basically allow your computer to play Connect the Dots. Each vector point has information in it telling your computer how to connect each point with straight or curved lines, and with what color to fill in the closed shape.

Because the computer only has to keep four points in its memory, it is much easier for the computer to edit vector-based images.

If you resize a vector-based image, it loses little or no detail. The vector points spread out and the computer just redraws the image. You can easily color, or recolor, a vector-based image very easily using a drawing program. Vector images can also result in smoother lines because the lines are not hand drawn.

Vector images do have some drawbacks, however. They are generally filled with a solid color or a gradient but can’t display the lush color depth of a raster. They also work better with straight lines or sweeping curves.

b. Major Formats

There are two types of image file compression algorithms: lossless and lossy.

Image files can be compressed to allow for easier online access. There are two primary types of compression, lossy which deletes data to be recreated later and lossless which removes redundant or repeated information with no loss of data.

GIF

The Graphics Interchange Format (GIF) can display up to 256 colors that are compressed via LZWlossless compression. Although there is significant flexibility in which 256 colors are chosen, the 256 color limit on GIFs makes them generally unsuitable for photographs except possibly as thumbnails.

JPEG

The term JPEG, or Joint Photographic Experts Group, actually only indicates how a picture is converted into a stream of bytes. What we tend to think of as JPEGs are really JFIF (JPEG File Interchange Format) files. JPEG files have a bit depth of 24, allowing for over 16 million colors, and they are saved via a lossy compression mechanism. JPEG files can be saved with a minimum compression mechanism, or they can be saved at very high levels of compression resulting in images with very low file sizes but considerable degradation of the image.

JPEG2000

JPEG 2000 is a newer version of the JPEG format that compresses images via wavelets and provides for zooming and panning of images. It currently requires either a server to be set up to provide access to the images or a user side plugin that must be installed on the end users machine.

PNG

The PNG, or Portble Network Graphic, is a file format developed by the World Wide Web Consortium as a patent free replacement for the GIF. Although not fully supported by current internet browsers (specifically Internet Explorer), the PNG format offers alpha channel transparency (providing up the 254 levels of partial transparency) versus the binary transparency offered in the GIF format.

TIFF

Tagged Image/Interchange File Format (the current version is the TIFF ITU T.6) is the standard file format for master file formats (both archive and display). It can handle 24 bit images, and although there are compression options available for use with the TIFF files master images should be saved only as uncompressed TIFFs.

3. How to Calculate Image Size

Images usually have a very large file size. The reason for this is that because most images are saved as raster files with each individual pixel needing to be saved separately. Additionally, not only is every pixel of the image saved separately, but the higher the bit depth, or the more colors, the more data is required to save each individual pixel.

The file size of an image file can be determined by multiplying its height and width in pixels time the images bit depth. The height and width can each be multiplied by the pixels per inch, or the height and width can be multiplied by each other and then by the pixels per inch squared. Regardless, this result is then multiplied by the bit depth of the image. It is probably easier to convert the bit depth to the total number of bytes (8 bits to a byte) first.

Calculating File Size

Option 1:

(height x ppi) x (width x ppi) x bit depth (in bytes) = file size in bytes

Option 2:

height x width x ppi2 x bit depth (in bytes) = file size in bytes

For example, using the first formula, the file size of a five by seven photo saved at 300 dpi, with a bit depth of 24 could be calculated by:

Height                   Width                                    Bit Depth             File Size

(5 in. x 300 ppi) x (7 in. x 300 ppi)              x 24 bits                =

(1500 pixels)       x (2100 pixels)                   x 3 bytes              = 9,450,000 Bytes,

= 9,450 Kilobytes, or 9.45 MB

4. Pixels per Inch versus Dots per Inch

The measurement of pixels per inch is a count of the number of pixel elements per inch and is usually used in reference to on screen viewing. The measurement of dots per inch is virtually identical except that it is usually used in reference to printing. Both of these terms are slightly misleading because of the way that images are created both on screen and via printing.

When viewing an image on screen, the images pixels per inch is irrelevant because monitors have fixed resolutions. Whether an image has 300 pixels per inch or 25 pixels per inch, a 100 pixel image will be the same size on screen and take up 100 pixels.

By contrast, the dots per inch of an image will control the size of an image that is printed. However, additional factors such as the line screen the image is printed in will also impact the final printed image.