Multimedia Images

7/28/2019 Multimedia Images

1/8

1

Multimedia Images: Vector-based vs. Bitmap Graphics

IntroductionMultimedia is, as described in Vaughan (2001), a combination of various

elements, such as text, graphic art, animation, video, and sound. Moreover, with the

demand increasing tremendously for the Internet and the World Wide Web through the

past few years, for example in distance education, shopping, traveling, and searching

database engines, these multimedia elements have become essential part of the Web

design. In particular, the images, suc h as pictures, clip art, 3-D graphics, and animation,

are commonly used in designing for both multimedia and the Web. Regardless of their

forms, multimedia images are generated by the computers in two ways: as vector-based

graphics and bitmap images (Vaughan, 2001).

In this paper, I will introduce vector-based and bitmapped graphics in order to

understand each graphic formats. I will also discuss the benefits and the drawbacks of

both types of images on a multimedia screen, particularly for the Web which is great

potential for multimedia. Then, I will present the summary of the discussion as well as

the choice of multimedia graphics for your needs.

Significance of the Topic

As mentioned above, image files can be divided into two distinct categories:

vector-based and bitmap images. These two are different in the way that how to be

processed by computers. In order to decide which format will help you with your

multimedia or Web project, you need to have a good understanding of both kinds of

images and know their advantages and disadvantages. Then, what is a vector-based

image? And what is a bitmap image?

Vector-based images are defined by mathematical relationships between points

and the paths connecting them to describe an image (Doughty, 2002) (See Figure 1). If a

vector-based image, for instance, contains a red dot, then the information, such as the

location of the circle's center point, the length of its radius, and the color, red, would be


2/8

2

the essential elements for this image file (Mustek, 2000). Graphical elements in a vector

file are called objects (PCCafe, 2001). Each object is an independent entity with

properties, such as color, shape, size, outline, and position on the screen, by its definition.

Since each object is a self-contained entity, you can easily move and change its properties

while maintaining its original clarity, and without affecting other objects in the

illustration. These characteristics make vector-based programs ideal for illustration and

3D modeling, where the individual objects usually need to be created and manipulated

through the design process (PCCafe, 2001).

Figure 1. Vector-based graphic: the image itself on the left and the actual lines

that make up the drawing on the right. (Anonymous, 2000b)

Bitmap images are made of individual dots called pixels (picture elements) that

are arranged and colored differently to form a pattern (PCCafe, 2001). The individual

squares that make up the total image can be seen when zoomed in. However, from a

greater distance the color and shape of a bitmap image appear continuous (See Figure 2).

Since each pixel is colored individually, you can easily work with photographs with so

many colors and can create photo-realistic effects such as shadowing and increasing color

by manipulating select areas, one pixel at a time (PCCafe, 2001). Bitmap programs are

ideal to retouch photographs, editing images and video files and creating original

artwork. Variety of changes to photographs can be made, such as adjusting the lighting,

removing scratches, people, and things, swapping details between images, adding text

and objects, adjusting color, and applying combinations of special effects.


3/8

3

Figure 2. Bitmap image: To the left you see an image and to the right the top of

one of the mountains when zoomed in. As you can see, the image consists of hundreds of

rows and columns of small elements that all have their own color. (Anonymous, 2000a)

Hence, if you work on a big-scale multimedia project or design a Web site, wha t

graphic format will be the best choice for your needs? Which features of images are more

important for the nature of your project: flexibility in scaling, file size, or photo-realistic

vs. computer-generated look? In the next section, I will talk about these issues.

Discussion: Vector-based vs. Bitmap Images

As stated before, vector-based images are resolution independent (Anonymous,

2000b). You can easily resize vector images to a thumbnail sketch or a billboard-sized

graphic. They just keep their smoothness when resized and do not lose detail and

proportion. Smooth curves are easy to define in vector-based programs and they retain

their smoothness and continuity even when enlarged. You can also change vector-basedimages into bitmap formats when needed. On the other hand, bitmap images provide

photo-realistic images that require complex color variations. They are not easily scalable

though. The disadvantage of bitmap images comes when you want to resize the picture.

Increasing the size of a bitmap has the effect of increasing individual pixels, making lines


4/8

4

and shapes appear rough and chunky. Reducing the size of a bitmap also distorts the

original image because pixels are removed to reduce the overall image size. Moreover,

since a bitmap image is created as a set of arranged pixels, its parts cannot be

manipulated individually. The following figure (Figure 3) very well illustrates the

difference between vector-based and bitmap images when they are resized.

Vector-based Image Bitmap Image

Figure 3. Vector-based image vs. Bitmap image when enlarged by 300%: While

the vector-based object is scaled without any loss in quality, the bitmap image has some

pixelation (i.e. jaggies seen above). (Anonymous, 2001)

Another advantage of using vector-based graphics in designing multimedia and

a Web site is smaller file size. It does not take up so much space because they only

contain data about the points, lines, and curves which form the object. However, most of

you probably have come across the problem of slow download speeds for Web graphics,

which are bitmap image formats.

Hence, vector-based images are great for the Web since they can be resized to any

proportion without loosing the quality of the original image and also the files are very

small. Nevertheless, as Veen (1998) pointed out, no technology comes without at least a

few drawbacks; so too with vectors (p.2). Therefore, one disadvantage of vector-based

images is that they cannot provide the realism of a photograph due to the nature of line

drawn images. Whereas, bitmap image formats give a realistic result for representation of


5/8

5

the real world, vector-based images can only come as close as cartoon-style drawings of

the objects (Veen, 1998).

Summary

To sum up, there are two types of computer images: vector-based images which

are made up of mathematically generated points, lines, and shapes, and bitmap images,

which consist of individual pixels with a different color. Further, each kind of images has

its own advantages and disadvantages when used on the multimedia Web pages. For

instance, you cannot easily scale bitmap images, but you can control every single pixel.

Thus, when you work with complex images, such as photographs, you can do number of

effects which are impossible in vector-based images. On the contrary, vector-based

images have advantage of scalability without distorting the original image and smaller

file size.

Finally, you need to decide what image format should be used in order to make

your project better. As discussed above, you may consider what features of images will

meet the needs of your project. If you want photo-realistic images, then the solution will

be the use of bitmaps. However, if the download speed of graphics is important for you

and your audience and the graphics are supposed to be resized and manipulated, then youshould consider vector-based formats.

Reference

Anonymous (2000a). Bitmap versus Vector Graphics. Retrieved July 26, 2002 from

Prepressure Page Website:

http://users.belgacom.net/prepresspanic/image/bitmapvector.htm

Anonymous (2000b). Bitmap versus Vector Graphics. Retrieved July 26, 2002 from

Prepressure Page Website:

http://users.belgacom.net/prepresspanic/image/bitmapvector2.htm

Anonymous (2001, July 30). Fireworks: Introduction: Vector versus Bitmap. Retrieved

July 25, 2002 from Boston University, Office of Information Technology


6/8

6

Website: http://www.bu.edu/webcentral/learning/fireworks1/vector-vs-

bitmap.html

Doughty, M. (2002, May 3). Two Kinds of Computer Graphics. Retrieved July 27, 2002

from Sketchpad.net Website: http://www.sketchpad.net/basics1.htm

Mustek, (2000). Mustek, Inc. Bitmap vs. Vector. Retrieved July 25, 2002 from

Mustek.com Website: http://www.mustek.com/class/bit_vec.html

PCCafe, (2001). Adobe Illustrator 8.0: A Vector Drawing Program. Retrieved July 25,

2002 from PCCafe Online Website:

http://www.sonic.net/mnitepub/pccafe/editorspic/adobe_illustrator8/vector_raster.

html

Vaughan, T. (2001). Multimedia: Making It Work. (5th

Ed.) New York:

Osborne/McGraw-Hill.

Veen, J. (1998, March 23). Vector Graphics. Retrieved July 31, 2002 from Webmonkey

Website: http://hotwired.lycos.com/webmonkey/98/12/index0a.html?tw=design

Related Links on the Web for the Topic

Computer Graphic Formats: Vector-based versus Bitmap

http://hotwired.lycos.com/webmonkey/design/graphics/index.html

Webmonkey Graphics Links on Image Production and Formats

http://graphicdesign.about.com/gi/dynamic/offsite.htm?site=http://desktoppub.tqn.com/m

subclipformats.htm

Best Graphic Formats

http://graphicdesign.about.com/gi/dynamic/offsite.htm?site=http://desktoppub.tqn.com/m

subclipformats.htm

Graphic File Formats: Bitmap vs. Vector Graphic Formats


7/8

7

http://graphicssoft.about.com/library/weekly/aa000327a.htm

Facts about Bitmap and Vector Images

http://webdevfp.uwyo.edu/webdesign/graphics/

Getting Started with Web Graphics

http://tech.irt.org/articles/js206/

Choosing the Right Format for Your Web Images

http://www.w3.org/Graphics/Activity

Vector Graphics for the Web

http://www.devx.com/projectcool/developer/gzone/reference/ref-vector.html

Vector-based Images

http://www.mvps.org/msauer/vector%20bitmap.htm

Vector vs. Bitmap

http://tutorials.xxdz.com/graphics/dimvsres/vecvspix.html

Vector-based vs. Pixel-based Images

http://www.adobe.com/support/techguides/webpublishing/flash/vectorbitmap.html

Understanding the SWF (Flash) File Format: Vector and Bitmap Data in SWF Files

Image Editing Software Information

http://graphicssoft.about.com/cs/imageediting/

Various Image Editors & Resources


8/8

8

http://dmoz.org/Computers/Software/Graphics/Vector_Based/Fireworks/

Several Resources about Fireworks

Bitmap Editors

http://www.adobe.com/products/photoshop/main.html

Adobe Photoshop 7.0

http://www.macromedia.com/software/fireworks/

Macromedia Fireworks MX

Vector Editors

http://www.adobe.com/products/illustrator/

Adobe Illustrator 10

http://www.macromedia.com/software/flash/

Macromedia Flash MX

* This paper is written by Sibel Kazak for the course EDC385G Multimedia Authoring at the University of

Texas Austin.

Multimedia Images

Documents

Transcript of Multimedia Images