| back to tutorials

FOCUS: This session talks about Image. These pages target basic to intermediate level of users.

INTRODUCTION TO AN 'IMAGE' :

An Image in computer graphics terminology can be called as a matrix of pixels or group of pixels. Pixel means “Picture element”, it is the smallest unit of an image. A pixel can contain only one color in it.

Static image is a two-dimensional form of a captured still scene or a drawn picture. Moving Image is nothing but a sequence of images put together to form a digital video or film. A volatile image is the one that exists only for a short period of time like moving images on the screen, reflection in a mirror.. etc. Non-volatile images such as photographs, printouts and textile prints stay forever.

Images are two types in general: 1. Raster & 2.Vector.

RASTER IMAGES:

A Raster image is nothing but a rectangular grid of pixels stored in a data structure. Every pixel is made of color channels that store color information in a two-dimensional array (containing small integer triplets - usually three distinct color component values for each channel) in computer memory. These raster images can be displayed via any display medium like monitor, printed paper.. etc; but these images lose their quality when they are zoomed due to their fixed pixel representation style of colors. This is referred to as pixilation of images.

Raster image can also be called as a Bitmap image, which stores the colors technically at number of bits per pixel (color depth). Bitmap image size is usually measured by its dimensions - width & height. Bitmap commonly refers to the similar concept of a spatially mapped array of pixels.

Color Space:

Colors can be mathematically represented as tuples of numbers called color components. The combination of these color components in turn form Color space to represent a standard color model to be used for storing colors into pixels. For example RGB is a color space where R, G & B represents Red, Green and Blue colors respectively. Like RGB, many color spaces are there to define the color spaces to be used. CMYK, Y'CbCr & HSV etc. are few other available color spaces.

Usage of these color spaces depend on the input / output device we use. The most generally used color spaces are RGB and CMYK. When some image is getting displayed on the CRT / LCD monitors, it takes RGB as its primary color space to represent an image. Where as for printing of an image, CMYK (cyan, megenta, yellow and black) color components will be taken into consideration. This component-combination actually creates a 3-dimentional representation of a color space. All the three main color components (like red, green & blue / cyan, magenta & yellow) can be assigned to X, Y and Z axises respectively and the resulting 3D points provide the matrix of unique color values for each and every combination of the three colors collide at all particular points.

Color Profile:

Color profiles are lookup tables containing set of data to be used to characterize a color space of color input / color output device. Profiles contain color properties to map the colors of source or target devices.

These color profile standards are promulgated by the International Color Consortium (ICC). Usage of a color profile is must for a well managed workflow. Otherwise it is difficult to obtain exact standards of color to obtain required output.

Capturing devices like scanners, cams and output devices like monitors, printers usually produce / display files are tagged as having a standard editing space color profile like sRGB, Adobe RGB, or Wide Gamut RGB.

Color depth:

Color depth is a Computer Graphics term describing the number of bits used to represent a color of a single pixel in a bit mapped image. When we talk about the color depth, we use the term bpp (bits per pixel). Higher color depth gives a broader range of various colors to represent more clear images. We can observe the color depth while setting our desktop monitor resolution. We often see 16 bit, 24 bit, 32 bit and 64 bits options in our system monitors. Actually all these bit measurements came from the bits and bytes representation of computer technology. Any information is stored as bits and bytes in computer memory, and as the multiples of

A bit means one binary digit.
1 byte = 8 bits
1 kilobyte = 1024 bytes
1 megabyte = 1024 kilobytes
1 gigabyte = 1024 megabytes
1 terabyte = 1024 gigabytes.. and so on.

While we talk about the color depth of an image,
1-bit color (2¹ = 2 colors) monochrome (black and white).
2-bit color (2² = 4 colors) CGA, gray-scale early NeXTstation, color Macintoshes.
3-bit color (2³ = 8 colors) early home computers.
4-bit color (2⁴ = 16 colors) as used by EGA and color Macintoshes.
5-bit color (2⁵ = 32 colors) Amiga chipset.
6-bit color (2⁶ = 64 colors) Amiga chipset.
8-bit color (2⁸ = 256 colors) early Unix workstations, VGA at low resolution, Super VGA, AGA, color Macintoshes.
10-bit color(2¹⁰ = 1024 colors) used in some file formats related to film technologies.
12-bit color (2¹² = 4096 colors) few Silicon Graphics systems, Color NeXTstation systems, and Amiga systems in HAM mode.
16-bit color (2¹⁶ = 65,536 colors) later color Macintoshes, called “thousands of colors.”
24-bit color - is called True color used for new generation Windows / Mac systems.
32-bit color - used for latest Machines.
(Few lines of above data are taken from Wikipedia.)

Pixel aspect ratio

It is defined as the ratio of width to height of a pixel. Pixel aspect ratio of 1:1 is good for optimum picture quality. Displaying an image with a certain pixel aspect ratio on a device with different pixel aspect ratio will cause the image to look unnaturally stretched or squished in on of the either horizontal or vertical directions.

Image / picture aspect ratio is the ratio of the width and height of an image. Image Resolution is defined as number of pixels per square inch. In some cases it is defined as number of columns and rows of pixels creating the display (e.g., 1280×1024).

VECTOR IMAGES:

Vector images are another type of images that are made and stored based on mathematical formulae. These images are best for line art and accurate art to avoid extra things in the view. Vector graphic images are built on geographical primitives like lines, curves, points and their locus, polygons information along with vertex details stored in a matrix format.. etc., so that they don't lose any quality if they are magnified. There is no pixel mechanism here. So, vector graphic images make use of mathematical formulae to build the picture based on the monitor / web page resolution with maximum possible quality.