Raster & Vector Graphics

Raster graphics

Raster graphics is a digital way to visualize complex images such as photographs, computer screenshots or digitized images. A raster graphics image is an image, which is made by many different very small points, called pixels, that together make an image. There are two important parameters for the display of a raster graphics: resolution and colour depth. The resolution indicates how many pixels are used in width and height to display the image (resolution = width x height). For instance 1920×1080 pixels is the resolution of a HD TV and means that the width of the screen is made up of 1920 pixels while the height is made up of 1080 pixels the resolution of the screen therefor is 2.073.600 pixels which is roughly as much as picture taken with a 2 megapixel camera. That does not seem very much, but since the pictures on TV are constantly in motion you can never see one single picture in all its detail hence 1920x1080p (FullHD) looks very appealing (compared to former resolutions).
The other important parameter in raster graphics is the colour depth. The colour depth (in digital audio known as bit depth) indicates how many different colours are being displayed in a raster graphics image. One bit can only be in two different states, on or off or in binary terms (the way computers work) 1 or 0. If there is an image with the colour depth of one bit it means that any pixel in the picture can either be black or white. The higher the colour depth gets the more different colours can be displayed in a raster graphics image. An image with the colour depth of 16 bit contains 216 (=65.536) different colours, an image with the bit depth of 24 bit would therefor contain 16.777.216 different colours (224 = 16.777.216).
The advantage of a raster graphics image is that it can display very complex graphical illustrations such as photographs or screenshots, but the disadvantage is that this comes to the prize of a very large file size, because to save a raster graphics image every single pixel and the colour of it has to be saved (as long as the image is saved with a lossless codec). Another huge disadvantage is that raster graphics images depend on their resolutions hence they can’t be resized, because a raster graphics image is basically like a map of pixels on which every pixel has one specific spot. So if you want to enlarge an image you would have to (figuratively) stretch the map with the pixels, but that would make the image lose its detail, because the same amount of pixels would be spread over a larger space. To solve that problem you would have to add new pixels to it and that is the problem: you cannot add new pixels to an image that were not there in the fist place, since you basically would have to guess what you need to add. The same principle applies if the size of an image needs to be scaled down, the only difference is that most computers are fairly good in down scaling (removing some of the pixels from an image). As a consequence raster graphics are not suitable for varying image sizes, which is by far the biggest disadvantage of raster graphics.


This simple poster was created using GIMP.

Vector Graphics

A vector graphics image is an image that is completely made out of vectors. A vector is a path between two points, hence to draw a line (or any other object) in a vector graphics image you only need to define the starting and the ending point of the vector and eventually additional parameters for more complex figures such as curves or polygons. For instance to save a circle in a vector graphics image the only parameters that need to be saved are the position of the centre, the radius and the attributes of the line with which the circle is created and the computer can automatically create the circle. But there is no need to save every single pixel of the picture, as it is the case for raster graphics images. As a consequence vector graphic images have very small file sizes compared to raster graphics images. The most common file format for vector graphics is SVG (Scalable Vector Graphics). Vector graphics are very useful to display any kind of geometric figures or pictures made out of geometric figures, but they are not capable of displaying very complex objects like photographs.
A vector graphics image does not depend on its resolution, because the mathematical equations (vectors) that make up the picture can be adjusted to any size. Images that are getting displayed in many different sizes are usually made with vector graphics, for example logos of companies which are get displayed as a tiny image on a website or as a giant add an a billboard. Another use of vector graphics is for 3d, as 3d graphics are constructed as vector like objects and then rasterised, 3d movies get rasterized before they get shown whereas computer games get rasterised in real time. The most common programs to work with vector graphics are Adobe Illustrator (industry standard) and Inkscape (open source).

This a an example logo. It was uploaded as a png, but created as a vector graphics image.


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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s