Bitmap vs Vector

(Flashfoto 2014)

(Flashfoto 2014)

(Yadav 2012)

(Yadav 2012)

This title is very common I should say and it could be a little misleading. Because when one reads “VS”, one thinks that it is a battle between both sides, as to which is better. In fact, when it comes to Bitmaps (aka Raster images) and Vectors images (aka Vector arts), the important thing to know is, when to use one, and when the other, as they both have their pros and cones.

Definitions

A Raster Graphic (or bitmap) is a digital image composed of a matrix of points. When it is at original scale, (e.g. viewed at a 100%) each point will correspond to exactly one pixel. Some well known raster graphics formats include: .BMP, .JPEG, .GIF, etc.

A Vector Graphic is an image composed by layers of paths and strokes, rather than a matrix of coloured points as is the case with raster graphics. The paths and stokes could be defined by lines, elliptical arcs, and quadratic and cubic splines. Together they comprise a vector graphics image. Some 2D vector formats include: .PDF, .SVG, .CGM, etc.

Technique Comparison

Comparison between raster and vector graphics on four parameters, where 1 is better than 0.

Comparison between raster and vector graphics on four parameters, where 1 is better than 0.

From the simple table above, it is clear that vectors are better when it comes to having simple coloured, resolution independent content. That is the reason they are heavily used in logos and signs. On the other hand, a photo-realistic image would require a palette of millions of colours, each pixel would probably have a unique colour value from its neighbours, thus a bitmap is more adequate in that case.

Other important points, which are worth mentioning, when comparing the two methodologies are: editing, anti-aliasing and animation.

Editing: When it comes to editing bitmap images, one is working with individual pixels, therefore all the advantages and drawbacks of pixel-manipulation are relevant. This is not the case with vectors, as with them, one is manipulating shapes using control points and affine transformations.

Anti-aliasing: Anti-aliasing a vector is comparatively easy as all the shapes that build it have either a functional or parametric representation. Removing aliasing from a bitmap image however could be more ambiguous. The simplest solution would be super-sampling anti-aliasing (SSAA) or Multi-Sampling (MSAA) which deals to a great extent with things like jagged-edges however, it is usually much heavier in terms of computation and its complexity grows exponentially. There are other techniques for antialiasing bitmap images however most of them involve edge detection or finding the functions which produce the shapes in the image, which could be an easy or impossible task, depending on
the case.

Animation: When considering animation of 2D images it is needless to say that animating shapes using their functions and parameters is much easier, and less ambiguous than animating pixel values. Having said that, if your goal is precisely that of morphing one image into another, then simple linear interpolation of pixel values could work better and could be easier to achieve.

Image Comparison

Now lets consider the two images from the beginning of the page. In the two images above we have two good examples which prove the point. Let us take the letter ‘S’ first. As you can plainly see, the vector representation of the letter is not only better looking, but also resolution independent (scalable), resulting in more legible text, when it comes to fonts. And if this is not enough, it should be noted that a vector image requires much less space than its raster equivalent. That is precisely why most of the fonts on the applications on your computer as well as all majour operating systems since the early 90’s use vector fonts. But we wont dwell on fonts here (see end of page for more info on font rendering).

The other example shows a photograph of, what I think is, Marilyn Monroe. The photograph is a raster image (the right). As it is expected, when zooming-in on a given part of the image the bitmap will ‘lose detail’. This illusion occurs because more pixels would have to represent the information which was previously represented by only one pixel (and there is no more hidden information which can be expanded and displayed when zooming-in). The vectorised photograph is shown on the left. There are different techniques for converting raster to vector, which we wont be covering here. All of them however will produce something similar to the result shown above (depending on the settings used). It is obvious, that the image is not photo-realistic anymore. We have lost some details, colour information and realism but, we have gained infinite scalability (resolution-independence) and have a soup of  coloured lines and splines, forming regions, which the human eye perceives as a well-known actress from the 50’s.


The material for this article was taken from one of the sections of a report on ‘Digital Glyph Representation and Rendering’ that I had written for one of my MSc modules, ‘Personal Inquiry’. More on that particular project you can read here.

References

Flashfoto, 2014. Vector vs Raster [online]. Flashfoto Blog. Available from: http://flashfotoincblog.com/2013/10/03/vector-vs-raster/ [Accessed 22 May 2014].

Yadav, J., 2012. Aspects of SVG Image Format for Web Designing [online]. Design Modo. Available from: http://designmodo.com/svg-images/  [Accessed 22 May 2014].

Advertisements

Tags: , , , , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: