Multimedia Building Block:

IMAGE
The Nature of Digital Images

An image is a spatial representation of an object, a two-dimensional or

three-dimensional scene or another image. Often the images reflect
the intensity of lights.

Most photographs are called continuous-tone images because the

method used to develop the photograph creates the illusion of perfect
continuous tone throughout the image.
The Nature of Digital Images

Images stored and processed by computers, displayed on computer

screens, are called digital images. This is because they are

represented by a matrix of numeric values each represents a

quantized intensity values

Basic Concepts
The smallest element on a digital image is known as a pixel
– a picture element.
A digital image consists of a (usually rectangular) matrix of
pixels.
Depth

The depth of an image is the number of bits used to represent a pixel.

1-bit - black-and-white image, also called bitmap image

4-bit - can represent 16 colors, used in low screen resolution

screens(EGA/VGA)

8-bit –can have 256 colors. The 256 color images are often known as
indexed color images. The values are actually indexes to a table of many
more different colors.

8-bit grey – 256 grey-levels. The image contains only brightness/intensity

data without color information.
Depth

16-bit – can have 65536 colors, also known as hi-color in Windows systems. The
16 bits are divided into 5 bits for RED, 6 bits for GREEN and 5 bits for BLUE.

24-bit – 2 = 16, 777,216 colors, true color. Each byte is used to represent the
24
intensity of a primary color, RED, GREEN and BLUE. Each color can have 256
different levels.

32-bit – 2 = 4,294,967,296. Usually, 3 bytes are used to represent the three

32
primary colors and the fourth byte is used as the alpha channel.
Resolution
Resolution measures how much detail an image can have. There are several
resolutions relating to images.

Image resolution is the number of pixels in an image.

320 X 240 = 76800 pixels
700 X 400 = 280000 pixels
Display (Monitor) resolution – refers to number of dots per inch(dpi) on a monitor.
Windows systems usually have 96 dpi resolution. Some high resolution video
adapters/monitors support 120 dpi.

Output resolution – refers to number of dots per inch(dpi) on a (hard copy) output
device.
Many printers have 300dpi or 600dpi resolution. High-quality image setters can
print at a range between 1200dpi and 2400dpi, or higher.
Acquiring Digital Images
There are many ways to create or get digital images. We list some of
the most common ways:

• Make an image from scratch with a paint program. A good program

will allow you to choose the depth, resolution and size.

• Grab an image of screen. The depth, resolution and size is

determined by the screen.

• Capture an image from a digital camera or camcorder. The depth,

resolution and size is determined by the camera or the camcorder.
The popular depth is 24-bit. The commonly used resolution is 320 X
240, 640 X 480 and 800 X 600.
Acquiring Digital Images

• Scan a photograph or a print using a scanner. You can select from a

range of different depths and resolution. The choice should be
determined by the type of original and the final output form.
• Convert from existing digital media.
Vector Graphics
Instead of using pixels, objects can be represented by their attributes,
such as size, color, location and so on. This type of graphics is known
as vector graphics or vector drawing. This is an abstract
representation of a 2-dimensional or 3-dimensional scene.

A vector graphics file contains graphics primitives, for example,

rectangles, circles, lines.

There are many languages for describing vector graphics. Three of

them are very popular. They are:
Languages for Describing Vector
Graphics
PostScript –was developed by Adobe as a page description language. The next page
shows a graphic with its PostScript program source. (Example on next page)

VRML – stands for Virtual Reality Markup Language. It is for descripting a scene in a
virtual world.

Example code:
Cube {
Width 30 Depth 30 Height 30}
Material {
ambientColor 0.2 0.2 0.2
diffuseColor 0.8 0.8 0.8
SpecularColor 0 0 0
emissiveColor 0 0 0
shininess 0.2
Transparency 0
}
Languages for Describing Vector
Graphics

SVG – stands for Scalable Vector Graphic. It is a language for

describing two-dimensional graphics in XML. It allows three types of
graphic objects: vector graphic, shapes, images and text.
Color Systems
Color is a vital component of multimedia. Color management is both a
subjective and a technical exercise, because:

• Color is a physical property of light, but

• Color perception is a human physiological activity.
• Choosing a right color or color combination involves many trials and
aesthetic judgment.
• Color is the frequency wave-length of a light wave within the narrow
band of the electromagnetic spectrum to which the human eye
responds.
RGB Color Model

This is probably the most popular color model

used in computer graphics.
It is an additive system in which varying amount
of the three primary colors: Red, Green and Blue,
are added to black to produce new colors.
You can imagine three light sources of the
primary colors shine on a black surface. By
varying the intensity of the lights, you will
produce different colors.
CMY Color Model
This model is based on the light absorbing
quality of inks printed on paper.
Combining three primary color pigments.
Cyan, Magenta and Yellow, should absorb
all light, thus resulting in black.
It is a subtractive model.
The value of each primary color is
assigned a percentage from the lightest
(0%) to the darkest (100%).
Because all inks contain some impurities,
three inks actually produce a muddy
brown. A black color is added in printing
process, thus CMYK model

Note: The primary colors in RGB and CMY

models are complementary colors.
HSB Color Model
This model is based on the human perception of color. The three
fundamental characteristics of colors are:

Hue – is the wavelength of the light. Hue is often identified by the

name of the color. It is measured as a location on the standard color
wheel as degree between 0 to 360.
Saturation – the length or purity of the color. It represents the
amount of gray in proportion to the hue and is measured as a
percentage from 0%(gray) to 100% (fully saturated).
Brightness – the relative lightness or darkness of the color. It is
measured as a percentage from 0%(black) to 100% (white).
Gamut

The gamut of a color system

is the range of colors that can
be displayed or printed. The
spectrum of colors that can
be viewed by human eye is
wider than any method of
reproducing color.
Image File Size

Image file size—expressed as the number of bytes—increases with the

number of pixels composing an image, and the color depth of the
pixels. The greater the number of rows and columns, the greater the
image resolution, and the larger the file. Also, each pixel of an image
increases in size when its color depth increases—an 8-bit pixel (1 byte)
stores 256 colors, a 24-bit pixel (3 bytes) stores 16 million colors, the
latter known as truecolor.
Image Compression
Image compression uses algorithms to decrease the size of a file.
High resolution cameras produce large image files, ranging from
hundreds of kilobytes to megabytes, per the camera's resolution and
the image-storage format capacity.
Image Compression cont..

High resolution digital cameras record 12 megapixel (1MP =

1,000,000 pixels / 1 million) images, or more, in truecolor. For
example, an image recorded by a 12 MP camera; since each pixel
uses 3 bytes to record truecolor, the uncompressed image would
occupy 36,000,000 bytes of memory—a great amount of digital
storage for one image, given that cameras must record and store
many images to be practical.
Major graphic file formats
Format Type File Extension Description
Adobe Photoshop Bitmap psd Specific for the application
Apple Macintosh Bitmap pict Platform dependent format
PICT
CompuServ GIF Bitmap Gif Cross platform, indexed color,
new standard allows
animation, popular on WWW.
Jpeg (Joint Bitmap Jpg Using lossy compression,
Photographic Nearly every digital camera can
Experts Group) save images in the JPEG/JFIF
format, which supports 8 bits
per color (red, green, blue) for
a 24-bit total, producing
relatively small files.
Major graphic file formats
Format Type File Extension Description
PNG (Portable Bitmap Png created as the free, open-source
Network Graphic) successor to the GIF. The PNG file
format supports truecolor (16
million colors) while the GIF
supports only 256 colors. The PNG
file excels when the image has
large, uniformly colored areas.
TIFF (Tagged Image Bitmap tif a flexible format that normally
File Format) saves 8 bits or 16 bits per color
(red, green, blue) for 24-bit and
48-bit totals, respectively, usually
using either
the TIFFor TIF filename extension.
Major graphic file formats

Format Type File Extension Description

PostScript Vector Ps, eps Page description

language
Windows bitmap Bitmap Bmp No compression,
platform dependent
Bitmap vs. Vector
Bitmap
• A bitmap image is a computer file used to store a picture. It consists
of tiny blocks called pixels:

a 4 x 3 pixel image = 12 pixels total

The image above consists of just 12 pixels so in reality would

appear as no more than a small grey dot. The gaps you see
between the pixels do not really exist – they are just shown
for clarity.
Bitmap
The data of a bitmap image (a.k.a. rasterized image) is saved using a “grid
system”. Each and every pixel in a bitmap image has a location on an X/Y
coordinate system:

In addition, the color value at each pixel

location is also saved. Because of this,
bitmap files can be extremely large.
Bitmap images are perfect for
photographs since all of the color data is
accurately saved.
Here are some common bitmap file extensions:
BMP,GIF,JPG, JPEG,PNG, PICT (Macintosh), PCX, TIFF,
PSD (Adobe Photoshop)
Vector
-the use of geometrical primitives such as points, lines, curves, and
shapes or polygon(s), which are all based on mathematical equations,
to represent images in computer graphics.
An original reference photograph before Detail can be added or removed from
vectorization vector art. Vector illustrations can have
their own colours, allowing artists to
achieve desired results.
Vector

Vector graphics files store the lines, shapes and colors that make up an
image as mathematical formulae. A vector graphics program uses
these mathematical formula to construct the screen image, building
the best quality image possible, given the screen resolution. The
mathematical formulae determine where the dots that make up the
image should be placed for the best results when displaying the image.
Digital Image Processing
This is a very large area containing the following sub-areas:

Image analysis- concerned with techniques for extracting

descriptions from images that are necessary for higher-level scene
analysis methods.

Image Recognition – concerned with the techniques for recovering

information about objects in the image.

Image enhancement-concerned with the technique to improve the

image and to correct some defects, such as.
• Color and tonal adjustment
• Transformations e.g: scale and rotate
• Special effects e.g., texture, stylize, blur, sharpen
Image and Graphics software