Chapter 2. Raster vs. Vector Graphics
Pterodactyl
Table of Contents
Overview
Raster Graphics
Anti-aliasing
Vector Graphics
Vectorising
This chapter compares two main kinds of computer graphics.
Overview
In computer graphics there are two types of graphics: raster, where
each pixel is separately defined, and vector, where mathematical
formula are used to draw lines [1][http://pterodactyl.l2p.net/book/
php5image/page/bi01.html#wikipedia].
In other words, raster images are composed of pixels, and vector
images are composed of paths [6][http://pterodactyl.l2p.net/book/
php5image/page/bi01.html#raster.and.vector].
Both these types are widely used in the web world. Reading this book,
you will be able to create raster graphics as well as vector graphics
with PHP.
Raster Graphics
A raster graphics (also known as digital images or bitmap) is a
rectangular grid of pixels (color dots) on a display device. The color
of each pixel is individually defined (see Chapter 4, Color Palettes
[http://pterodactyl.l2p.net/book/php5image/page/ch04.html] for
details). [1][http://pterodactyl.l2p.net/book/php5image/page/
bi01.html#wikipedia]
Size of raster images depends on their resolution (width and height)
and color depth (see Chapter 4, Color Palettes [http://
pterodactyl.l2p.net/book/php5image/page/ch04.html] for details), e.g.
for a black and white image, only one bit per pixel is required. Let's
assume the white color is coded with bit 1 and black color is coded
with bit 0, then an 8x8 grid requires 8 bytes (1 byte is equal to 8
bits).
Figure 2.1. Example of an 8x8 Pixel Grid
00011000 => 0x18 => 24
00111100 => 0x3C => 60
01011010 => 0x5A => 90
10011001 => 0x99 => 153
00011000 => 0x18 => 24
00011000 => 0x18 => 24
00011000 => 0x18 => 24
00011000 => 0x18 => 24
Example of an 8x8 Pixel Grid
[http://pterodactyl.l2p.net/images/Grid8x8.png]
Full colored images (16M colors), however, require 3 bytes (24 bits)
per pixel, so their size can dramatically increase. A 640x480 image
with 24 bits color depth has size almost 1MB. An old 3 Megapixel
digital camera makes 2048x1636 photoes, each of them requires about
10MB. Modern digital cameras equipped with 10 Megapixel matrix need up
to 30MB for each photo. Well, image compression (see Chapter 6, Image
Formats [http://pterodactyl.l2p.net/book/php5image/page/ch06.html] for
details) can help a bit, but the problem still exists.
What happens when an existing image has been scaled to a higher
resolution? Nothing good, but loss of quality. Look at the picture
below.
Figure 2.2. A Scaled Bitmap Image
[http://pterodactyl.l2p.net/images/ScaledBitmap.png]
A Scaled Bitmap Image
On the other hand, raster graphics have ability to show continuous
tones and shading in photographic images [5][http://
pterodactyl.l2p.net/book/php5image/page/bi01.html#vector.vs.raster].
Examples of raster graphics are images come from a digital camera or
created with a bitmap editor such as Paint, GIMP, or Adobe PhotoShop.
Anti-aliasing
The jagged appearance of scaled bitmap images can be partially
overcome with the use of anti-aliasing [6][http://pterodactyl.l2p.net/
book/php5image/page/bi01.html#raster.and.vector]. Anti-aliasing is the
technique of minimizing the distortions artifacts known as aliasing [1]
[http://pterodactyl.l2p.net/book/php5image/page/bi01.html#wikipedia].
Figure 2.3. Anti-Aliased Bitmap Image
[http://pterodactyl.l2p.net/images/AntiAliased.png]
Anti-Aliased Bitmap Image
[Tip][http://pterodactyl.l2p.net/images/docbook/tip.png] Tip
Compare the image above to Figure 2.2, "A Scaled Bitmap Image", which
is aliased (well, that is anti-aliased too, but much less than this).
Vector images always appear smooth, as shown in the section called
"Vector Graphics", so they need no anti-aliasing.
Vector Graphics
A vector graphics (also known as geometric modeling or object-oriented
graphics) is the use of geometrical primitives such as points, lines,
curves, and polygons, which are all based upon mathematical equations
to represent images. [1][http://pterodactyl.l2p.net/book/php5image/
page/bi01.html#wikipedia]
Unlike raster graphics, vector images are fully scalable to a higher
resolution with original quality. Look at the picture below.
Figure 2.4. Scaled Vector Image
[http://pterodactyl.l2p.net/images/ScaledVector.png]
Scaled Vector Image
[Note][http://pterodactyl.l2p.net/images/docbook/note.png] Note
Both original and scaled vector images were exported to bitmap for
display on this page.
Size of vector images relatively less depend on their resolution than
size of bitmap images.
One major weakness of vector graphics is their inability to show
continuous tone images like photographs or complex blends [5][http://
pterodactyl.l2p.net/book/php5image/page/bi01.html#vector.vs.raster].
Vectorising
Vectorising is the process of bitmap tracing to convert it into vector
format.
Figure 2.5. Vectorising Example
Original Bitmap Image
[http://pterodactyl.l2p.net/images/pterodactyl.jpg]
Original Bitmap Image
Vectorised Image
[http://pterodactyl.l2p.net/images/Vectorised.png]
Vectorised Image
[Note][http://pterodactyl.l2p.net/images/docbook/note.png] Note
The image was been exported to bitmap for display on this page.
Vectorising is good for reducing file sizes for lower bandwidth
delivery, while retaining enough detail [1][http://pterodactyl.l2p.net/
book/php5image/page/bi01.html#wikipedia].