Most graphics
nowadays are pixel-based. Every point in the graphic is
represented by one pixel. This is a really good solution for most scenarios,
including digital photography (where you really want to maintain every
single piece of information the camera is "seeing"), but there are
shortcomings too. For instance, have a look at
Figure 1,
where you see some simple text created in
Microsoft Paint. This text is pixel-based. In
Figure 2, you see the same text, but this time the image width
and height have been enlarged. Do you see the
stairway effect that appears along the edge of each letter?
So, when you make a pixel-based image larger, you lose quality.
That's obvious, of course. Imagine that a 100 x 100 pixel image is resized to
200 x 200 pixels.
Instead of 10,000 pixels, we now have 40,000 pixels. So, where we had a
1 x 1
pixel in the original image, we now have 2 x 2 pixels. Paint is using a
very simple algorithm to resize images: if the graphic becomes larger, just
clone the pixels. This then creates the stairway effect.
NOTE
Professional software such as Adobe Photoshop comes with several sophisticated algorithms
to make the quality loss less severe when resizing images (especially when
making them smaller); however, there still is a notable effect when
increasing an image's dimensions.
Vectors
There is an alternative approach: vector-based images. In a vector-based image, every element is represented as a
geometrical object—for example, a line, a circle, a polygon, or a curve,
just to name a few. The main advantage is that there is no quality loss
when resizing an image: a circle changes its diameter, but that's all.
There is no stairway effect, since a circle is still a circle and not, as
with a pixel image, a set of pixels ordered in a circular fashion.
Obviously, not every image can be represented as vectors. Think
again of photos—it is theoretically possible to try to find geometrical
elements and patterns in a portrait or a landscape (there are even
algorithms for that!), but it is virtually impossible to create an exact
representation of a photo by just using vectors. However, in computing
there are several areas where vectors make real sense. One such area is
fonts. See Figure 3
for a typical Windows font (coincidentally the same font used in figures
Figure 1 and Figure 2). Most fonts are vectors, so there is
no quality difference whether you use them in 8pt, 10pt, 12pt, or 100pt.
If you type a letter in a word processor and then change the font size to
something really large, you still get smooth edges. Once you paste text
into pixel-based imaging software such as Paint, you lose the vector
information and are back to pixels.
Another area prone for vector representation is the user interface
(UI). The standardized UIs of an application are, most of the
time, vector-compatible. Most of them need to be resizable, so the content
can remain intact if the user changes the width or the height of a window.
However, in reality, very few UIs have been based on vectors.
