UNIT

Formatted on September 11, 2000

1 2 3 4 5 6 7 8

The Nature of Digital Images Vector Graphics Colour Systems Some Image Techniques Image And Graphics File Formats Digital Image Processing Image And Graphics Software Exercises 2 7 10 16 18 20 21 22

To understand how computers process

images and graphics

To understand how computers work with

colours

To understand the differences between

images and graphics

Department of Computer Science

COMP3600/SCI2600 Multimedia Systems 3. Images and Graphics (200009) Slide: 1

An image is a spatial representation of an object, a two-dimensional or three-dimensional scene or another image. Often the images reect 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 quantised intensity values.

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.

Height

Height

Depth Width
Width

Depth

Department of Computer Science

COMP3600/SCI2600 Multimedia Systems 3. Images and Graphics (200009) Slide: 2

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 colours, used in low resolution screens(EGA/VGA) 8-bit can have 256 colours. The 256 colour images are often known as indexed colour images. The values are actually indexes to a table of many more different colours. For example, Colour 3 is mapped to (200, 10, 10). 8-bit grey 256 grey-levels. The image contains only brightness/intensity data without colour information.

0 3 1 2 3 253 254 255

(255, 0, 0) (255, 0, 10) (200, 0, 0) (200,10, 10) (10,10, 10) (20, 0, 50) (0,100, 100)

255 0 0 0 0 0 0 128

0 255 0 0 0 0 128 0

0 0 0 255 0 128 0 0

0 0 255 0 255 0 0 0

0 255 0 128 0 255 0 0

0 0 255 0 255 0 0 0

0 128 0 255 0 0 255 0

128 0 0 0 0 0 0 255

Department of Computer Science

COMP3600/SCI2600 Multimedia Systems 3. Images and Graphics (200009) Slide: 3

16-bit can have 65536 colours, also known as hi-colour in Windows systems. The 16 bits are divided into 5 bits for RED, 6 bits for GREEN and 5 bits for BLUE. 24-bit colours, true colour. Each byte is used to represent the intensity of a primary colour, RED, GREEN and BLUE. Each colour can have 256 different levels.

32-bit (4G). Usually, 3 bytes are used to represent the three primary colours and the fourth byte is used as the alpha channel.

RED 255 0 0 255 255 0 127 255 0

GREEN 0 255 0 255 0 255 127 255 0

BLUE 0 0 255 0 255 255 127 255 0

Colour Red Green Blue Yellow Magenta Cyan Light gray White Black

Department of Computer Science

COMP3600/SCI2600 Multimedia Systems 3. Images and Graphics (200009) Slide: 4

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.

pixels,

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 image displayed on a monitor with 96dpi will be . 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 imagesetters can print at a range between 1200dpi and 2400dpi, or higher. The above image printed on a 300dpi printer will be inch.

Department of Computer Science

COMP3600/SCI2600 Multimedia Systems 3. Images and Graphics (200009) Slide: 5

There are many ways to create or get digital images. We list asome 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 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 nal output form. determined by the camera or the camcorder. The popular depth is 24-bit. The commonly used resolution is , and .

Convert from existing digital media e.g., photoCD. The attribute is determined by the
original image.

Synthesize an image from numerical data.

Department of Computer Science

COMP3600/SCI2600 Multimedia Systems 3. Images and Graphics (200009) Slide: 6

Instead of using pixels, objects can be represented by their attributes, such as size, colour, 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 le contains graphics primitives, for example, rectangles, circles, lines. There are many languages for describing vector grphics. Three of them are very popular. They are: 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 sample

VRML stands for Virtual Reality Markup Language. It is for descripting a scene in a virtual world. An simple examle is shown on the right. SVG stands for Scalable Vector Graphic. It is a language for describing two-dimensional graphics in XML. It allows three types of grahic objects: vector graphic shapes, images and text.

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 }

Department of Computer Science

COMP3600/SCI2600 Multimedia Systems 3. Images and Graphics (200009) Slide: 7

%!PS-Adobe-1.0 %%BoundingBox: 36 90 360 432 % This file contains a program to draw a cardioid as an envolop of circles % whose centres are on the circumference of a fixed circle and % whose radius are the distance to a fixed point on the fixed circle /inch {72 mul} def /unitcircle{ newpath 1 0 moveto 0 0 1 0 360 arc stroke} def /distance{ /y1 exch def /x1 exch def /y0 exch def x1 sub dup mul y0 y1 sub dup mul add sqrt} def /cardioid{ /lnwid exch def /nsteps exch def /baserad exch def gsave translate baserad baserad scale 360 nsteps div dup 359 { /theta exch def gsave theta cos dup theta sin dup 3 1 roll 1 0 distance dup /r exch def 3 1 roll translate dup scale lnwid r div baserad div setlinewidth unitcircle grestore} for lnwid 2.2 mul baserad div setlinewidth unitcircle grestore} def 3.5 inch 4 inch 1 inch 36 0.5 cardioid

Department of Computer Science

COMP3600/SCI2600 Multimedia Systems 3. Images and Graphics (200009) Slide: 8

Bitmap

Vector graphic

A bitmap contains an exact pixel-by-pixel

value of an image

a vector graphic contains mathematical

description of objects

A bitmap le is xed in resolution The le size of a bitmap is completely

determined by the image resolution and its depth

a vector graphic is resolution independent the le size of a vector graphic depends on

the number of graphic elements it contains

A bitmap image is easier to render

displaying a vector graphic usually involves

a large amount of processing

Department of Computer Science

COMP3600/SCI2600 Multimedia Systems 3. Images and Graphics (200009) Slide: 9

Colour is a vital component of multimedia. Colour management is both a subjective and a technical exercise, because:

Colour is a physical property of light, but Colour perception is a human physiological activity. Choosing a right colour or colour combination involves many trials and aesthetic judgement. Colour 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
Our sensations of colour are within us and colour connot exist unless there is an observer to perceive them. Colour does not exist even in the chain of events between the retinal receptors and the visual cortex, but only when the information is nally interpreted in the consciousness of the observer.
Wright, the rays are not coloured 1963, 1967

Department of Computer Science

COMP3600/SCI2600 Multimedia Systems 3. Images and Graphics (200009) Slide: 10

This is probably the most popular colour model used in computer graphics. It is an additive system in which varying amount of the three primary colours, red, green and blue, are added to black to produce new colours. You can imagine three light sources of the primary colours shine on a black surface. By varying the intensity of the lights, you will produce different colours.

R Red G Green B Blue

Department of Computer Science

COMP3600/SCI2600 Multimedia Systems 3. Images and Graphics (200009) Slide: 11

This model is based on the light absorbing quality of inks printed on paper. Combining three primary colour pigments, Cyan, Magenta and Yellow, should absorb all light, thus resulting in black. It is a subtractive model. The value of each primary colour 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 colour is added in printing process, thus CMYK model. Note: the primary colours in RGB and CMY models are complementary colours.

C Cyan M Magenta Y Yellow

Department of Computer Science

COMP3600/SCI2600 Multimedia Systems 3. Images and Graphics (200009) Slide: 12

This model is based on the human perception of colour.

This model is widely used in encoding colour for use in television and video.

The three fundamental characteristics of colours The theory behind this model is that are: human perception is more sensitive to brightness than any chrominance information, Hue is the wavelength of the light. Hue is so a more suitable coding distinguishes between often identied by the name of the colour. It luminance and chrominance. This also produces is measured as a location on the standard a system that is compatible with colour wheel as a degree between to black-and-white TV systems. . The Y-signal encodes the brightness Saturation is the strength or purity of the information. Black-and-white television system colour. It represents the amount of gray in will use this channel only. proportion to the hue and is measured as a percentage from 0%(gray) to 100%(fully The U and V channels encode the saturated). chromatic information. The resolution of the U and V channels is often less than the Y channel Brightness is the relative lightness or for the reason of reducing the size. darkness of the colour. It is measured as a percentage from 0%(black) to 100%(white).
Department of Computer Science COMP3600/SCI2600 Multimedia Systems 3. Images and Graphics (200009) Slide: 13

The gamut of a colour system is the range of colours that can be displayed or printed. The spectrum of colours that can be viewed by human eye is wider than any method of reproducing colour. Different colour 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 colour systems.

A Natural colour B RGB gamut C CMYK gamut

Department of Computer Science

COMP3600/SCI2600 Multimedia Systems 3. Images and Graphics (200009) Slide: 14

A colour palette is an index table to available colours in an indexed colour system. When working in 8-bit mode, a system can display only 256 colours out of a total of 16 million colours. The system keeps a default palette of available colours.

11 11 11 132 11 11 11 11 11 11

11 11 132 11 132 11 11 112 11 11

11 132 11 11 11 132 11 112 11 11

11 11 132 11 132 11 11 112 11 11

11 11 11 132 11 132 11 11 11 11

11 11 11 11 11 11 11 11 11 11

11 11 11 11 11 11 11 11 11 11

11 16 16 16 16 11 11 112 11 11

11 11 11 11 11 16 11 112 11 11

11 11 11 11 11 16 11 11 11 11

Palette ashing. Each program may have its own palette. It may replace the system palette with its own for the period it is active. This may cause an annoying ash of strange colours in your screen, known as palette ashing. This is a serious problem in multimedia applications.
COMP3600/SCI2600 Multimedia Systems 3. Images and Graphics (200009) Slide: 15

Department of Computer Science

Dithering is a technique to increase the number of colours to be perceived in an image. It is based on human eyes 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 sufcient distance, the individual pixel will not be distiguishable. The cluster will look like a single block of a colour different from the individual pixel.

Department of Computer Science

COMP3600/SCI2600 Multimedia Systems 3. Images and Graphics (200009) Slide: 16

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

Department of Computer Science

COMP3600/SCI2600 Multimedia Systems 3. Images and Graphics (200009) Slide: 17

A digital image is stored in a le conforming to certain format. In addition to the pixel data, the le contaions information to identify and decode the data:

The format The image size Depth Colour and palette Compression
Some formats are dened to work only in certain platform while other can be used for all platforms. Some formats are specic 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 le size smaller. Some compression algorithms will lose some image information.

Department of Computer Science

COMP3600/SCI2600 Multimedia Systems 3. Images and Graphics (200009) Slide: 18

Some popular le formats

Format Adobe Photoshop Apple Macintosh PICT AutoCAD DXF CompuServ GIF Description specic for the application platform dependent format specic for the application cross platform, indexed colour, new standard allows animation, popular on WWW Jpeg bitmap jpg using lossy compression, le size is very small, popular on WWW Portable Bitmap bitmap pbm, pgm, ppm platform independent PC Paintbrush bitmap pcx specic for the application Portable Network Graphic bitmap png very new format, platform independent PostScript vector ps, eps page description language TIFF bitmap tif allows compression, and different depth, popular in many applications Windows bitmap bitmap bmp no compression, platform dependent Windows Metale metale wmf may contain bitmap and graphics elements Type bitmap bitmap vector bitmap Ext psd pict dxf gif

Department of Computer Science

COMP3600/SCI2600 Multimedia Systems 3. Images and Graphics (200009) Slide: 19

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.

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,

colour and tonal adjustment, Transformations, e.g., scale, rotate, Special effects, e.g., texture, stylize, blur, sharpen.

Department of Computer Science

COMP3600/SCI2600 Multimedia Systems 3. Images and Graphics (200009) Slide: 20

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 les in various formats and
save/export to another format. Paint Shop Pro can understand les in a very large number of formats.
COMP3600/SCI2600 Multimedia Systems 3. Images and Graphics (200009) Slide: 21

Department of Computer Science


1. A bitmap image has resolution bytes.

pixels. Each pixel is 24-bit deep. What is the size of the bitmap in

2. A photograph of inches is to be scanned. It will be used in a multimedia application in which the image will be displayed on screen. Hardcopy may be printed on a 300dpi laser printer if the user wants. The size of the hardcopy should be inches. What is the best resolution to be used in scanning? 3. A photograph of inches is scanning in 300dpi resolution and 8-bit colour. The image is then saved in a jpeg le with 1:20 compression ratio. It is used on a web page. If a viewer connecting to the Internet using a modem with typical transfer rate of 800 bytes/sec, how long will it take to download the image to his/her computer?

4. The table on the left below represents an indexed image. The table on the right is the colour index table. What is the colour of the following pixels: (0,2), (1,1), (1,3), (2,1), (2,2), (3,0). 0 1 2 3 0 2 7 5 2 1 3 2 6 7 2 0 1 4 5 3 3 5 4 0 0 1 2 3 R G B R G B 255 0 0 4 0 255 255 0 255 0 5 128 128 128 0 0 255 6 255 255 0 0 0 0 7 255 255 255

Department of Computer Science

COMP3600/SCI2600 Multimedia Systems 3. Images and Graphics (200009) Slide: 22

Answer to Exercises
1. Each pixel requires 3 bytes (= 24 / 8).

bytes Note: 1 Kbytes = 1024 bytes. 1 Mbytes = bytes.

Kbytes

2. We need to scan the photo using 400dpi resolution becasue we need to have at least the number of pixels in the nal printed output.

3. The raw size of the photo is

bytes bytes

The compressed image size is The time required to download it is

4. The answer is listed in the table below: Pixel (0,2) (1,1) (1,3) (2,1) (2,2) (3,0) Val R G B Colour 0 255 0 0 RED 2 0 0 255 BLUE 5 128 128 128 Gray 6 255 255 0 Yellow 4 0 255 255 Cyan 2 0 0 255 BLUE
COMP3600/SCI2600 Multimedia Systems 3. Images and Graphics (200009) Slide: 23

Department of Computer Science