Basics of working with bitmaps

When you work with digital images, you're likely to encounter two main types of graphics: bitmap and vector. Bitmap graphics, also known as raster graphics, are composed of tiny squares (pixels) that are arranged in a rectangular grid formation. Vector graphics are composed of mathematically generated geometric shapes such as lines, curves, and polygons.

Bitmap images are defined by the width and height of the image, measured in pixels, and the number of bits contained in each pixel, which represents the number of colors a pixel can contain. In the case of a bitmap image that utilizes the RGB color model, the pixels are made up of three bytes: red, green, and blue. Each of these bytes contains a value ranging from 0 to 255. When the bytes are combined within the pixel, they produce a color similar to an artist mixing paint colors. For example, a pixel containing byte values of red-255, green-102 and blue-0 would produce a vibrant orange color.

The quality of a bitmap image is determined by combining the resolution of the image with its color depth bit value. Resolution relates to the number of pixels contained within an image. The greater the number of pixels, the higher the resolution and the finer the image appears. Color depth relates to the amount of information a pixel can contain. For example, an image that has a color depth value of 16 bits per pixel cannot represent the same number of colors as an image that has a color depth of 48 bits. As a result, the 48-bit image will have smoother degrees of shading than its 16-bit counterpart.

Because bitmap graphics are resolution-dependent, they don't scale very well. This is most noticeable when bitmap images are scaled up in size. Scaling up a bitmap usually results in a loss of detail and quality.

Bitmap file formats

Bitmap images are grouped into a number of common file formats. These formats use different types of compression algorithms to reduce file size, as well as optimize image quality based on the end purpose of the image. The bitmap image formats supported by Adobe runtimes are BMP, GIF, JPG, PNG, and TIFF.

BMP

The BMP (bit mapped) format is a default image format used by the Microsoft Windows operating system. It does not use any form of compression algorithm and as such usually results in large file sizes.

GIF

The Graphics Interchange Format (GIF) was originally developed by CompuServe in 1987 as a means to transmit images with 256 colors (8-bit color). The format provides small file sizes and is ideal for web-based images. Because of this format's limited color palette, GIF images are generally not suitable for photographs, which typically require high degrees of shading and color gradients. GIF images permit single-bit transparency, which allows colors to be mapped as clear (or transparent). This results in the background color of a web page showing through the image where the transparency has been mapped.

JPEG

Developed by the Joint Photographic Experts Group (JPEG), the JPEG (often written JPG) image format uses a lossy compression algorithm to allow 24-bit color depth with a small file size. Lossy compression means that each time the image is saved, the image loses quality and data but results in a smaller file size. The JPEG format is ideal for photographs because it is capable of displaying millions of colors. The ability to control the degree of compression applied to an image allows you to manipulate image quality and file size.

PNG

The Portable Network Graphics (PNG) format was produced as an open-source alternative to the patented GIF file format. PNGs support up to 64-bit color depth, allowing for up to 16 million colors. Because PNG is a relatively new format, some older browsers don't support PNG files. Unlike JPGs, PNGs use lossless compression, which means that none of the image data is lost when the image is saved. PNG files also support alpha transparency, which allows for up to 256 levels of transparency.

TIFF

The Tagged Image File Format (TIFF) was the cross-platform format of choice before the PNG was introduced. The drawback with the TIFF format is that because of the many different varieties of TIFF, there is no single reader that can handle every version. In addition, no web browsers currently support the format. TIFF can use either lossy or lossless compression, and is able to handle device-specific color spaces (such as CMYK).

Transparent bitmaps and opaque bitmaps

Bitmap images that use either the GIF or PNG formats can have an extra byte (alpha channel) added to each pixel. This extra pixel byte represents the transparency value of the pixel.

GIF images allow single-bit transparency, which means that you can specify a single color, from a 256-color palette, to be transparent. PNG images, on the other hand, can have up to 256 levels of transparency. This function is especially beneficial when images or text are required to blend into backgrounds.

ActionScript 3.0 replicates this extra transparency pixel byte within the BitmapData class. Similar to the PNG transparency model, ActionScript offers up to 256 levels of transparency.

Important concepts and terms

The following list contains important terms that you will encounter when learning about bitmap graphics:

Alpha
The level of transparency (or more accurately, opacity) in a color or an image. The amount of alpha is often described as the alpha channel value.

ARGB color
A color scheme where each pixel's color is a mixture of red, green, and blue color values, and its transparency is specified as an alpha value.

Color channel
Commonly, colors are represented as a mixture of a few basic colors—usually (for computer graphics) red, green, and blue. Each basic color is considered a color channel; the amount of color in each color channel, mixed together, determines the final color.

Color depth
Also known as bit depth, this refers to the amount of computer memory that is devoted to each pixel, which in turn determines the number of possible colors that can be represented in the image.

Pixel
The smallest unit of information in a bitmap image—essentially a dot of color.

Resolution
The pixel dimensions of an image, which determines the level of fine-grained detail contained in the image. Resolution is often expressed in terms of width and height in number of pixels.

RGB color
A color scheme where each pixel's color is represented as a mixture of red, green, and blue color values.