1. Unit 5 – Multimedia Element: Graphics
Semester 2

2. Unit Outline In this unit, we will learn: Sources of Digital Images
Image Types
Vector Graphics
Bitmap Graphics
Image Quality
Color Resolution
Image Resolution
Image Compression
Image File Size
Colors
Graphics Card
Graphics Software
Graphic File Formats

3. Introduction
A single table, chart, graphic or photograph can illustrate what might take many pages of narrative text to communicate.
Graphics may do a better job of creating a lasting impression or establishing a mood than the narrative text may communicate.
Graphics must be in digital form if we want to use them in multimedia applications.
Digitizing is needed to convert images into a format that the computer can recognize and manipulate.

4. Sources of Digital Images
Scanned images
Still images
Video images
Photo CD
Stock photography
Clip art

5. Scanned Images
Scanners digitize already developed images, including photographs and drawings.
The optical resolution (measured in dpi, dots per inch) of a scanner refers to the number of sensor elements per inch on the scan head.
Scanner

6. Scanned Images
When scanning images, we may choose the highest possible resolution to obtain the best quality. At a later stage, we may reduce the resolution of the image in order to reduce its file size.
Slide scanners are used for converting a slide or a negative to a digital image.
Slide scanner 6

7. Still Images and Video Images
Digital cameras capture images in a digital format.
Digital video cameras can be used to capture frames of video or still images.
Digital camera
Digital video camera

8. Photo CD
Photo CD enables photos taken with a film camera to be viewed in a digital format.
Photo CDs, such as Kodak’s Picture CD, store hundreds of digital photographs.

9. Stock Photography
High-quality photographs are available from stock photography Web sites.

10. Stock Photography
Commercial image providers or stock photography houses create and sell the rights to images.
We may purchase the rights to use an image but that does not mean we own it or can use it whenever we want.
Copyright and licensing agreements vary from one stock photography house to another. 10

11. Clip Art
Clip Art is a collection of drawings or illustrations, generally organized by category.
If images are in the public domain, it means we can use these images at our discretion for no charge.
Clip art from clip art libraries is available for download from the Web.

12. Image Types Vector graphics Bitmap graphics Vector graphics12

13. Vector Graphics
Refer to drawings that contain flat colors without tonal variations
Are composed of geometric shapes such as lines, curves, ovals and polygons
Can be constructed using mathematical formulas
Can be resized and rotated without distortion
Have smaller file sizes for simple drawings
Are good for graphics that must retain distinctive lines when sizes change (e.g. logos)

14. Bitmap Graphics
Refer to images that have tonal variations, such as color photographs
Are composed of pixels
Enlarging bitmap graphics too much may result in staircasing, or jaggies.
Bitmap is an image type suitable for creating
photo-realistic images
complex drawings
images which contain fine details

15. Image Quality Factors that affect the quality of bitmap graphics:
Color resolution
Image resolution
Image compression

16. Color Resolution
Also known as color depth, bit depth, pixel depth, bit resolution, pixel resolution
Color resolution refers to the number of bits used to represent the color of a pixel.
Color resolution ranges from 1-bit color to 32-bit color.
An image with a higher color resolution will be more colorful and of higher photographic quality.
Higher color resolution will make the file size larger.

17. Color Resolution Color Resolution Number of Colors 32-bit 232
16.7+ million colors plus an 8-bit (256-level) grayscale mask
24-bit
224
16.7+ million colors
16-bit
216
65536 colors
8-bit 28
256 colors
4-bit 24
16 colors
2-bit 22
4 colors
1-bit 21
2 colors 17

18. Color Resolution
Self-Study Slide
The actual number of colors displayed on the image depends on the color resolution and the monitor settings. There is no guarantee that our image will be displayed as we planned.
If we save an image as 24-bit color but our user’s monitor is set to display only 256 colors, the colors in the image will be converted to a fixed palette. This conversion can result in drastic changes in the way our image appears. 18

19. Color Resolution Self-Study Slide
As the color resolution increases, so does the size of the file.
As the color resolution changes, so does the color palette. 19

20. Image Resolution
Pixel dimensions refer to the number of pixels along the height and width of a bitmap image.
Image resolution is measured in pixels per inch (PPI).
Images must be at a certain minimum image resolution to avoid a pixelated or out-of-focus appearance.
Normally, web graphics can be set to 96 PPI for display on monitor.
The file size of an image is proportional to its pixel dimensions.

21. Image Resolution
The more graphics we use, the longer the viewers will have to wait. Thus, we should optimize the images by:
cropping to the area that we need for the final product
choosing the pixel dimensions of the image that we need
reducing the color resolution to the minimum necessary for the image
reducing the image resolution to no more than 96 ppi
If the image resolution is set too low, the image quality may become unacceptable. 21

22. Image Resolution
Since there are more pixels per unit area, an image of higher image resolution usually produce more details and finer color transitions than an image of lower image resolution.
Monitor resolution refers to the number of pixels that a monitor can show at one time. Examples: 1024 x 768, 1440 x 900
The actual display size of an image on-screen is determined by the pixel dimensions of the image and the monitor resolution. 22

23. Image Resolution Self-Study Slide Pixel Density on Monitor
A 15 inch monitor with an aspect ratio of 4:3 has monitor resolution of 800 x 600. Calculate the pixel density on the monitor?
Let the width and height of the monitor be and .
Since the diagonal is 15” in length, we have, by property of a right-angled triangle:
Solving for , we get
The width of the monitor is 12”.
The pixel density on the monitor
15”
600 px
800 px 23

24. Image Compression
Mathematical algorithms are used to reduce file sizes.
Smaller file size
reduces the required storage space
shortens the transfer time if the file needs to be transmitted
Two kinds of compression
Lossless compression: None of data has been actually lost during compression.
Lossy compression: Some data has been lost during compression.

25. Image File Size
Image File Size (in bytes): (Assume that there is no image compression)
Image Size in Pixels
Screen Size
Color Resolution (in Bits)
Number of Available Colors
Approximated File Size (in Bytes)
640 x 480
Full screen 8
256
307, 200
320 x 240
Quarter screen
76, 800
1024 x 768 24
16.7 million
2, 359, 296

26. Image File Size
Example: When a 10 MB file is compressed to 2 MB, the compression ratio is (10 / 2) = 5.
Image File Size (in bytes): (Assume that the compression ratio is CR) 26

27. Colors
Self-Study Slide
Color is the frequency of a light wave within the narrow band of the electromagnetic spectrum to which the human eye responds.
The cornea of the eye acts as a lens to focus light rays onto the retina. The light rays stimulate many thousands of specialized nerves, called rods and cones, that cover the surface of the retina.
Receptors in the cones are sensitive to red, green, and blue light, and all the nerves together transmit the pattern of color information to the brain.
* This slide is out of the examination scope. 27

28. Colors Two common color methods: Additive color method
Subtractive color method
Color is created by combining colored light sources in three primary colors - red, green, and blue (RGB).
Most TV and computer monitors use this method.

29. Colors Subtractive color method
Color is created by combining colored media such as paints or ink.
Subtractive color method is the process used to create color in printing.
The printed page consists of tiny halftone dots of three primary colors - cyan, magenta, and yellow (CMY).

30. Colors Color models are used to specify color in computer. RGB model
A 24-bit methodology where color is specified in terms of red, green, and blue values ranging from 0 to 255.
Black
(0, 0, 0)
000000
White
(255, 255, 255)
FFFFFF
Red
(255, 0, 0)
FF0000
Green
(0, 255, 0)
00FF00
Blue
(0, 0, 255)
0000FF
Yellow
(255, 255, 0)
FFFF00
Cyan
(0, 255, 255)
00FFFF
Magenta
(255, 0, 255)
FF00FF

31. Colors HSB and HSL models Other color models: CMYK, CIE, YIQ, YUV, YCC
H: Hue, S: Saturation, B: Brightness, L: Lightness
Color is specified as an angle from 0 to 360 degrees on a color wheel.
Other color models: CMYK, CIE, YIQ, YUV, YCC
Color wheel is often used to specify the hue value.

32. Colors
Self-Study Slide
The total range of colors supported by a color model is known as its gamut.
Different color models have different gamuts
It may not be always possible to accurately convert colors from one model to another.
Some color models are device dependent. (Different devices give rise to slightly different sets of colors.) 32

33. Graphics Card
Also known as video card, video adaptor, display card, display adaptor, graphics acceleration card
Is an expansion card whose function is to generate and output images to a display
Sometimes, graphics hardware is integrated on the motherboard.
Popular brands: ATI, NVIDIA 33

34. Components of Graphics Card
Self-Study Slide
Display memory / Video RAM (VRAM)
for storing pixel attributes
Graphics controller
for coordinating the activities of all other components of the card
some has the capability of manipulating the image data independently of the central processor 34

35. Components of Graphics Card
Self-Study Slide
Digital to Analog Converter (DAC)
It takes the final digital data from the VRAM and converts it to analog signals before sending them to the monitor for display (the digital data stored in the VRAM describes the pixel attributes needed to draw an image on the screen) 35

36. Graphics Software Three types of graphics software Painting tools
Drawing tools
Image editing tools
Create bitmap graphics
Example: Corel Paint Shop Pro

37. Graphics Software Drawing tools Image editing tools
Create vector graphics
Example: Adobe Illustrator
Image editing tools
Edit existing images & photographs
Example: Adobe Photoshop

38. Graphics File Formats JPEG (Joint Photographer Experts Group)
Supports millions of colors (24-bit)
All browsers support the JPEG file format without plug-ins.
Uses a sophisticated mathematical model to produce a sliding scale of graphic compression that enables us to choose the degree of compression we wish to apply to the image
Photographs and continuous-tone images look best and are generally smallest when saved as a JPEG. 38

39. Graphics File Formats JPEG Low quality, high compression.
High quality, low compression. 39

40. Graphics File Formats GIF (Graphics Interchange File Format)
Supports up to 256 colors (8-bit)
All browsers support the GIF file format without plug-ins.
Images that have solid areas of color look best and are smallest when saved as a GIF.
Animated GIF (GIF89a) is used for animation (see Unit 6). 40

41. Graphics File Formats PNG (Portable Network Graphics)
PNG file format supports variable transparency that allows us to store up to 256 different levels of partial transparency (i.e. from fully transparent to fully opaque).
A unique (special) feature of the PNG file format is its capacity for gamma correction (the ability to correct for differences in how computer monitors interpret color. Colors will be closer between platforms.)
Other graphics file formats: BMP, TIFF, PICT, PSD, PDD 41

42. Reference
Part of this slide set is prepared or/and extracted from the following book:
Multimedia For The Web Revealed, Calleen Coorough & Jim Shuman, Thomson Learning, 2006, ISBN:
This set of slides is for teaching purpose only.
Self-study slide(s) is / are within the scope of the final examination.