1

Multimedia Images: Vector-based vs. Bitmap Graphics

Introduction
Multimedia 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

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.

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-based images 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

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

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 you should 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

Website: http://www.bu.edu/webcentral/learning/fireworks1/vector-vsbitmap.html Doughty, M. (2002, May 3). Two Kinds of Comp uter 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

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

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.