Dr. CK Tan, UMS 1

Multimedia:Graphics

Dr. CK Tan, UMS 2

MULTIMEDIA COMPONENTS

Graphics

Animation

Video

Audio

Cds

Dr. CK Tan, UMS 3

GRAPHICS

A graphic is said to be worth athousand words if it is shownwhen it is needed.

Graphics often combines text,illustrations and colour.

Basically, there are 2 kinds of graphics :• bitmaps (based on pixels)• vector images (based on mathematical

equations)

Dr. CK Tan, UMS 4

Graphic images

• A digital display is divided into discrete, individually addressable points called pixels

• Images are produced by assigning a color and intensity to each pixel

Dr. CK Tan, UMS 5

Vector Graphics• It is stored as a set of instruction which

describe the dimension and shape of every component of the drawing

• To display a vector graphic, each instruction is read and converted to the shapes and colors that comprise the image

• Created by any graphical programs can have drawing tools (e.g Photoshop)

Dr. CK Tan, UMS 6

Vector Graphics• Advantages:

• Object orientation: objects in a graphic can be manipulated separately

• Good for line art and charts

• Disadvantages:• The larger the graphic, the longer it

takes to render the image

Dr. CK Tan, UMS 7

Bit Maps• It is stored as a set of bits in

computer memory that define the color and intensity of each pixel in an image

• Created by digitizing images (photo, art work) or using Windows PAINT programs (.bmp)

• Also called raster or pixel maps

Dr. CK Tan, UMS 8

• Advantages:• Can display faster than vector

graphics• Good for reproducing images with

complex variations in color, shading and detail

• Disadvantages:• Require more disk space• Fixed resolution can lead to

scalability problems

Bit Maps

Dr. CK Tan, UMS 9

• Image depth refers to the maximal number of colors used in bitmap

• Each pixel can have 1 or more bits of color information attached to it

Image Depth

Bits Colors Uses

1 2 Text, line drawing

4 16 Simple drawings, graphics

8 256 Natural images

24 16.7M Photographic realism

Dr. CK Tan, UMS 10

• Size (in bytes) = (Height x Width x Color Depth) / 8

• Sample file size for different images size and color depths:• Monocrome: (640 x 480 x 1 bit)/8

= 38 KB• 256 colors: (640 x 480 x 8 bits)/8 =

307 KB• 16M colors: (640 x 480 x 24

bits)/8 = 922 KB

Image File Size

Dr. CK Tan, UMS 11

• High quality images• Big file size• High resolutions

• Image requirement will affect hardware and software selections including authoring and graphic software, video graphics adapter, disk space and data transfer rate

Images : Issues

Dr. CK Tan, UMS 12

Techniques for reducing image size:

• Reduce size of height and/or width of image

• Reduce the number of colors (ex: image depth)

• Image data compression

Image Compression

Dr. CK Tan, UMS 13

• Data compression reduces file size by eliminating redundancy

• Compression involves two parts : compression and decompression called codecs

• Two types of data compression:• Lossless output is exactly the

same compression (used for programs and data) (Example: WinZip)

Image Compression

Dr. CK Tan, UMS 14

• Second type of data compression:• Lossy a set of data will undergo

a loss of accuracy after compression. Typically used on image or graphics, animation, audio and video

• Eliminates info that is difficult for our eyes to detect (Ex: eye is less sensitive to change in color than it is to change in intensity)

Image Compression

Dr. CK Tan, UMS 15

• Bitmap (.bmp)• Internal format used by Windows

• Graphics Interchange Format (.gif). Used to transmit and exchange images between platforms Joint

• Photographic Expert Group (.jpg/.jpeg)• Offers the greatest compression

(10:1 without visible loss)

Some graphic image formats

Dr. CK Tan, UMS 16

Importance of graphic for education

We can communicate via graphics. It portrays our ideas to our audience. Sharing graphics with them and communicate with them can yield more information.

Graphics are used often in e-book (e.g. geography, science, mathematics) to illustrate theories and concepts.

Educational animation is important for explaining subject matter that changes over time.

The use of graphics is to make reading materials more interesting and easier to understand. However graphics as educational aids, readers must be able to interpret graphics correctly.