CHAPTER 5
GRAPHIC
DMM1033 // MULTIMEDIA TECHNOLOGY
DMM1013 // INTRODUCTION TO MULTIMEDIA
objectives
» To introduce graphics
» Differentiate between bitmap images and vector images
» Lossy vs lossless compression
» Get to know the types of web images
» Identify raster images and vector images
graphics
» Graphics often appear as backdrops behind text to create a pictorial
framework for the text
» Visual images or designs on surface (wall, canvas, screen, paper,
stone, etc) with the purpose to inform, illustrate or
entertain
graphics
graphics
Vector Graphic
graphics
Bitmap Graphic
bitmap images
» Bitmap images (raster image) are made up of pixel in a grid
» Pixels are picture elements : tiny dots of individual color that make
up of what you see on screen
» These dots are often referred to as a dot or dots-per-inch
» When you zoom in any bitmap images, you will find the image is a
combination of pixels
» The larger the display size, the larger the file size
» Example : images, photograph, landscape
» Applications that can handle bitmap images :
» Adobe Photoshop, Corel Photo-Paint, Paint.NET
bitmap images
vector graphic
» Vector graphic are images created with software that uses
geometrical formulas to represent images
» Images may consist of lines, curves and shapes with editable attributes such
as color, fill and outline
» These images show the vector’s principle
Image
Actual
lines that
make up
the
drawing
vector graphic
» Applications that can handle vector data :
» Adobe Illustrator, Adobe FreeHand, Corel Draw, AutoCAD
raster vs vector
Raster Image
Vector Image
Quality of image drops when it is resized
Scalable and the quality of image
maintains
Images look realistic
Cartoon-like image
Resolution dependent
Resolution independent
Contain white background
No white background
Bigger file size
Smaller file size
raster vs vector
raster vs vector
raster vs vector
raster vs vector
compression
» Compression : the key to creates smaller graphics
» Web based image file formats have to implement impressive compression
schemes in order to transform large images to smaller file size
» Two types of compression : Lossless and Lossy
compression
» Lossless compression
» Although file is compressed, it will not lose any quality
» Contain identical data regardless of whether it is compressed or
uncompressed
» Lossy compression
» Quality of compressed images drop
» Data is removed from the image in order to achieve compression
» Popular file format : JPEG
web images
Types of web images
»
GIF : Graphical Interchange Format
» Ideal for simple web graphics containing low number of colors.
»
JPEG : Joint Picture Expert Group
» High compression format. Uses up to 16.7 million colors but does not support
transparency.
»
PNG : Portable Network Graphics
» Another high compression format ideal for Web usage. Support transparency.
»
TIFF : Tagged Image File Format
» Another high compression format ideal for Web usage. Support transparency.
example : GIF
example : JPEG
example : PNG and TIFF
identify raster and vector
images
A
B
A
B
A
B
A
B
A
B
A
B