Multimedia Systems and

Applications

Lecture 4 - Images and Graphics

Introduction to Multimedia 1
Objectives
 To understand how computers process images and
graphics.
 To understand how computers work with colors.
 To understand the differences between images and
graphics.

Introduction to Multimedia 2
Contents
 The Nature of Digital Images
 Vector Graphics
 Color Systems
 Some Image Techniques
 Image and Graphics File Formats
 Digital Image Processing
 Image and Graphics Software

Introduction to Multimedia 3
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.
 Images stored and processed by computers, displayed on
computer screens, are called digital images although they often
look like continuous-tone. This is because they are represented
by a matrix of numeric values each represents a quantized
intensity values.
Introduction to Multimedia 4
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.

Introduction to Multimedia 5
Depth
The depth of an image is the number of bits used to represent each
pixel.
 1-bit: black-and-white image, also called bitmap image.

 4-bit: can represent 16 colors, used in low resolution screens

(EGA/VGA)
 8-bit: can have 256 colors. The 256 color images are often
known as indexed color images.
 8-bit gray: 256 grey-levels. The image contains only
brightness/intensity data without color information.

Introduction to Multimedia 6
Introduction to Multimedia 7
Depth
 16-bit: can have 65,536 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: 224 = 16,777,216 colors, true color. Each byte
is used to represent the intensity of a primary color,
RED, GREEN and BLUE. Each color can have 256
different levels.
 32-bit: 232 = 4,294,967,296 (4G). Usually, 3 bytes are
used to represent the three primary colors and the
fourth byte is used as the alpha channel.
Introduction to Multimedia 8
 Alpha Channel
 The alpha channel is the opacity channel.
 If a pixel has a value of 0% in its alpha channel, it is fully transparent (and, thus,
invisible), whereas a value of 100% in the alpha channel gives a fully opaque
pixel (traditional digital images).
 Values between 0% and 100% make it possible for pixels to show through a
background like a glass (translucency), an effect not possible with simple binary
(transparent or opaque) transparency.

Introduction to Multimedia 9
RGB

Introduction to Multimedia 10
Resolution
Resolution measures how much details an image can have. There
are several resolutions relating to images:
 Image resolution is the number of pixels in an image.
320240 = 76,800 pixels, 700400 = 280,000 pixels.
 Display (Monitor) resolution — refers to number of dots per
inch (dpi) on a monitor. Windows systems usually have 96dpi
resolution. Some high resolution video adapters/monitors
support 120dpi. For example, a 288216 image displayed on a
monitor with 96dpi will be 3’’2.25 ’’
 Output resolution — refers to number of dots per inch (dpi) on
a hard copy output device. Many printers have 300dpi or 600
dpi resolution. High-quality image setters can print at a range
between 1,200dpi and 2,400dpi, or higher. The above image
printed on a 300dpi printer will be 0.96’’0.72’’.
Introduction to Multimedia 11
Introduction to Multimedia 12
Introduction to Multimedia 13
Introduction to Multimedia 14
Introduction to Multimedia 15
Introduction to Multimedia 16
Introduction to Multimedia 17
Introduction to Multimedia 18
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 a screen. The depth, resolution and size is determined by
the screen.
 Capture an image from a digital camera or a 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240, 640480 and 800600.
 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— e.g., photoCD. The attribute is
determined by the original image.
 Synthesize an image from numerical data.

Introduction to Multimedia 19
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:
 PostScript was developed by Adobe as a page description language.
 VRML stands for Virtual Reality Markup Language. It is for describing a
scene in a virtual world.
 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.
Introduction to Multimedia 20
VRML sample
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
}

Introduction to Multimedia 21
Introduction to Multimedia 22
Vector versus Bitmap

Introduction to Multimedia 23
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 (380 – 760nm) to which the
human eye responds.
Wavelength Intensity Spectral Purity
Hue Brightness Saturation

Introduction to Multimedia 24
 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. Introduction to Multimedia 25
 CMYK 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. Introduction to Multimedia 26
HSB/HSL 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 a degree between 0 to 360.
 Saturation — is the strength 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 (Luminance) — is the relative
lightness or darkness of the color. It is measured
as a percentage from 0%(black) to 100%(white).

Introduction to Multimedia 27
Introduction to Multimedia 28
 YUV Color Model
 This model is widely used in encoding color
for use in television and video.
 The theory behind this model is that human
perception is more sensitive to brightness
than any chrominance information, so a more
suitable coding distinguishes between
luminance and chrominance. This also
produces a system that is compatible with
black-and-white TV systems.
 The Y-signal (Luminance) encodes the
brightness information. Black-and-white
television system will use this channel only.
 The U and V channels encode the chromatic
information (chrominance).
 The resolution of the U and V channels
is often less than the Y channel for the
reason of reducing the size.
Introduction to Multimedia 29
HTML Color Codes
 Each HTML color is represented as six digit HEX number (3 bytes),
each byte for a color in RGB system.

Introduction to Multimedia 30
HTML Color
Codes
 There are 216
colors that are
called “safe
colors”.

 These colors can

be displayed by
all browsers.

Introduction to Multimedia 31
 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.
 Different color models have different
gamut. The CMYK model is smaller
than RGB model.
 On the right is a Chromaticity
Diagram which illustrates gumat of
RGB and CMYK color systems.

Introduction to Multimedia 32
 Some Image Techniques
Dithering
 Dithering is a technique to increase the number of colors to be perceived in an
image. And to decrease the number of colors actually in the image.
 It is based on human eye’s capability for spatial integration, that is, if you look
at a number of closely placed small objects from a distance, they will look like
merged together.
 Dithering technique groups a number of pixels together, say 4, to form a cluster.
When viewed from sufficient distance, the individual pixel will not be
distinguishable. The cluster will look like a single block of a color different
from the individual pixel.
 It is usually used to decrease the colour depth without losing the details in an
image.

Introduction to Multimedia 35
Introduction to Multimedia 36
Anti-aliasing
 Aliasing is caused by the limited resolution of an output device.
(Remember the sampling theory described in Lecture 1.)
Aliasing makes edges seen as staircases.
 Anti-aliasing is a technique to reduce the staircase effect.
 It works by filling in pixels which should be half filled with
different levels of gray or matching colors. The result is sharper
edges, not blurring or smoothing them.

Introduction to Multimedia 37
Introduction to Multimedia 38
Image And Graphics File Formats
 A digital image is stored in a file conforming to certain format. In addition
to the pixel data, the file contains information to identify and decode the
data:
 The format
 The image size
 Depth
 Color and palette
 Compression
 Some formats are defined to work only in certain platform while other can
be used for all platforms. Some formats are specific for an application.
Some formats are for images, others are for vector graphics. Some formats
allow compression, others contain only raw data.
 Note: Formats using compression will make the file size smaller. Some
compression algorithms will lose some image information.

Introduction to Multimedia 39
Introduction to Multimedia 40
Digital Image Processing
This is a very large area containing the following sub-areas:
 Image analysis is concerned with techniques for extracting
descriptions from images that are necessary for higher-level
scene analysis methods. e.g. Machine Vision.
 Image recognition is concerned with the techniques for
recovering information about objects in the image. A sub-area
is character recognition.
 Image enhancement is concerned with the technique to
improve the image and to correct some defects, such as,
 Color and tonal adjustment,
 Transformations, e.g., scale, rotate,
 Special effects, e.g., texture, stylize, blur, sharpen.

Introduction to Multimedia 41
Image and Graphics Software
 Image editing and processing tools, such as
 Windows Paint— simple
 Adobe Photoshop
 Macromedia Firework
 MetaCreation Painter
 Corel PhotoPaint
 Paint Shop Pro— a low cost shareware
 The GIMP— an open source program with excellent functions
 Vector graphics tools, such as
 Adobe Illustrator
 Macromedia Freehand
 Corel Draw
 Format conversion tools— Many applications can open/import files in
various formats and save/export to another format. Paint Shop Pro can
understand files in a very large number of formats.

Introduction to Multimedia 42
Exercises

Introduction to Multimedia 43