Vector or Raster?
Image quality and scalability--and a bit of Plato

By Gary Bentley
Southwest International Personal Computer Club,
www.swipcc.org
From the May, 2005 issue of the I/O Port Newsletter

In January Ira Wilsker (APCUG Board of Directors) sent me the APCUG award logos for the SWIPCC newsletter and website recognition we had received. Ira sent us approximately 175 x 175 pixel jpeg images of the logos, approximately 18 KB files. These images didn't preserve the characters or other sharply defined areas of the award logos very well, as often occurs with jpeg images.

Jpeg (Joint Photographic Experts Group, pronounce jpeg as "jay-peg") file format uses a file compression algorithm that is primarily designed to reduce the size of a photographic image by discarding detail and color changes assumed to be too small to be differentiated by human perception. Jpeg utilizes so-called "lossy" compression, i.e., it irreparably damages the image quality every time the image is saved (this is why you should always edit a copy of your original jpeg camera image and preferably only save the edit once, at the close of your image editing). Jpeg doesn't preserve sharp edges, line drawings or lettering very well, having been designed for continuous tone images such as photographs. For those of you who ever suffered through a network analysis course, jpeg converts the spatial image (spatial meaning the actual two dimensional area of the image) into a frequency map (the image's frequency spectrum if you will) just as you can use the Fourier (actually the related Laplace transform typically) transform to get a frequency domain representation of an electronic network originally defined in the time domain (believe it or not, this is useful at times, e.g., when solving the equations describing the behavior of the network under stimulus of a particular signal). Again, those of you with an electronics background will recall using spectrum analyzers to view the frequency spectrum of time-varying electronic signals. If I haven't already put you to sleep (or discouraged you from reading further), you can then appreciate the fact that the jpeg compression algorithm discards the high frequency information in the frequency map, discarding more data if the compression level is high, less if the compression level is lower. A sharp edge (like the outline of a character, or a transition in line art) is a high frequency event in an image, so it doesn't survive intact with jpeg compression.

At any rate, Ira generously referred me to Don Singleton (President of the Tulsa Computer Society, http://www.tcs.org/) to obtain sharper and/or higher resolution images of the logos. Don told me he did all of his logo and award design with Adobe Illustrator because it was vector based. He sent me the original AI files for the logos, as well as once-saved jpegs (remember discussion above about only saving jpeg once) and gif versions.

What are "vector based" images and why would they be better for producing logos and award images? Vector graphics are images that are stored and displayed in terms of vectors, i.e., mathematically defined lines, curves and other geometric entities. When you view your computer screen, on the other hand, you are looking at bitmapped (also called "raster") graphics, e.g., if you have a 1024 x 768 pixel monitor or LCD display you are looking at 768 rows of 1024 "dots" (picture elements, hence "pix-el"). The image is mapped onto that array (an array is a grid of rows and columns) by defining the color and brightness of each of those dots at each point on the screen array.

Perhaps an illustration or two would help to make this clear. Here is an image of Kokopelli (various versions of this hunchbacked flute player appear in pre-Columbian paintings and etched inscriptions on rocks and in caves in the Southwest U.S.).

Now here is the same image as it would appear if bitmapped to an imaginary computer screen that was only 36 pixels wide by 50 pixels high, in other words, mapped to an array of 50 rows of 36 pixels.

Note that I removed any color data in the 36 x 50 pixel image above, making pixels either black or white, in order to make the rows and columns more obvious.

A vector image, on the other hand, is not stored or constructed with rows and columns of pixels like our bitmapped friend Kokopelli. Vector images are stored as mathematical formulas describing the curves, lines, etc. which make up the image. For example, the parametric equation for a circle is x = a cos(t), y = a sin(t). (You'll forgive me if I don't attempt to produce the equations for a vector representation of Kokopelli.) A vector graphic circle is only converted to pixels when you choose to display it on a computer monitor (monitors all being raster display nowadays). If I want a bigger circle, I just scale it up by increasing the value of the constant "a" in the formula and the circle is still perfectly formed (without any pixelation, or obvious rows and columns) when it is converted to pixels and displayed on the computer monitor. A bitpmapped circle doesn't scale up so well. Here is a circle originally produced and stored as a 100 x 92 pixel bitmap.

Here is the same 100 x 92 bitmap circle magnified:

A more common example of the quality of vector graphics is this issue of Throughput you are reading--or any pdf document for that matter. The fonts (the styles of typefaces used to display text) in a pdf document are Type 1 Adobe vector fonts. You can increase the magnification of this document at will and the individual letters will still look razor sharp.

Try this experiment with your Adobe Reader. Display a portion of a document like Throughput and then hit the "+" magnify button and enlarge the page. The vector characters scale up perfectly!

So, vector graphics and Adobe Illustrator give a designer like Don the ability to create a razor sharp logo or award graphic with included text and scale it up or down without losing any of that clarity. Since most computer and web imaging is not AI format, you can output the desired size image from the AI vector design to a more common bitmapped file type, e.g., jpeg or gif. Gif (pronounced "jiff") files store 256 color images without loss of quality, so they are perfect for small images with detail, things like icons, web buttons, cartoons, and yes, logos and award images. Because of the limited color though, they aren't good for photographic image storage. Jpeg, with support for 16.7 million colors, is better for photo images.

And what does any of this have to do with the work of the ancient Greek philosopher, Plato? Well, Plato noted that we understand what things are in our world of experience in terms of definitions. In other words, a thing X is defined in terms of a definition containing other things, e.g., A, B, C. For example, we look at the peach tree in our yard and say, "I know what that is--it is a Tree, and a Fruit Bearing Tree, and a Peach Fruit Bearing Tree." But then you need to define each of those items that you use to define the peach tree. Plato reasoned that we all have a sense of what a perfect peach tree (or any other recognizable feature of existence) looks like, and we compare that to the actual trees we observe. Some trees are better than others, so we might assume that all trees never quite reach the perfect idea defining the perfect tree, the model or form on which we base our understanding and recognition of trees. In other words, at some point knowing becomes more like recollection of, or acquaintance with, a perfect form or model, grasping the thing itself, rather than reaching understanding through a sequence of definitions and terms. Similarly, [as linguist Noam Choamsky noted] we never experience geometrically perfect figures like squares, circles and triangles, so how did we acquire these concepts? Since we have these perfect models in mind, though we have never seen them in this world, Plato therefore proposed that (1) our intelligence, our "souls," are divine, deathless and that they are directly aware of (2) the perfect, unchangeable, incorporeal forms which are the models for all things which exist in our temporal world. See the following links for an in-depth discussion of Plato's ideas about forms:

http://www.trincoll.edu/depts/phil/philo/phils/plato.html

http://faculty.washington.edu/smcohen/320/phaedo.htm

It seems to me that vector images are therefore Platonic perfect forms in this sense---and only gain "reality," a visible representation in our world, when an imperfect representation (such as a bitmapped display) is produced on a computer screen. I say imperfect representation since once produced, the bitmap itself cannot be accurately scaled, but must be reproduced via scaling of the vector equations.

Some of you old-timers out there may remind me that once upon a time (mid-1960s) computers did indeed display vector graphics directly, without bitmapping, sweeping an electron beam back and forth between points designated by the computer, thereby creating illuminated lines and groups of lines to form shapes. But the accuracy of those displays still could not be perfect, since it relied on magnetic field control of the electron beam, and that always varies a bit by distance and requires a great deal of compensation just to get close to accurate.



For more information on the Tulsa Computer Society click here




Tulsa Computer Society 5/01/2005
Don Singleton, President