What's the difference between Raster and Vector Graphics?

What's the difference between Raster and Vector Graphics?

Lately I'm getting a lot of questions about raster and vector graphics. Therefore, I decided to write a brief explanation of the main features of both formats. Including interactive animations to let you experience the main difference yourself.

Raster graphics

Raster graphics, also known as bitmaps, can be found everywhere. Most images you find on the web are of this type and mostly have the extension JPG, PNG, BMP or GIF. The technical principle behind this format is as old as the existence of the PC itself.

An image will be saved as a raster file by dividing it into pixels (dots) and then store the color information of these pixels. To display a raster image these pixels are simply being sent to the monitor. The amount of pixels in which the image is divided, the image resolution, determines the extent to which the image retains its detail, so its sharpness. The more pixels, the higher the quality. But a higher resolution also comes with a price, as this results in a larger file size in bytes.

Applications raster graphics

Especially photos, but also videos are saved by the raster principle. A camera can turn light into individual pixels quite easily. Raster-graphics can also be edited or designed from the ground up with software like Photoshop, Gimp and Paint. Most image editing software supply many different functions to affect these pixels. From cutting and pasting to complex and intelligent filters.

Vector graphics

Vector files are a different story. A vector image doesn't describe pixels, but consists of mathematical formulas to construct the image. Thus, for example, the center point, the radius and a fill color of a circle are stored. The result contains significantly less data in relation to the raster counterpart, where all the pixels of the image must be stored. To keep things simple I leave compression techniques disregarded in this article.

Applications vector graphics

Especially for print and logo design purposes this format is very handy. Next to this it is also increasingly being used for graphics on web sites, in interactive animations and for online maps. Vector graphics are usually designed by a professional designer. With a few exceptions, vector graphics are very well supported by all common browsers for desktop and mobile devices.

For designing and editing vector graphics different software-editors are available, including Adobe Illustrator, Inkscape and CorelDraw. In comparison to raster graphics, designing vector graphics requires a bit more technical knowledge and above all a lot of practice. Particularly if the vector graphics will be used in interactive animations online, specialized knowledge and experience with different optimization techniques is highly recommended. This really makes the difference. Your animations should load fast, display well and play smooth on all common devices and browsers.

Astroids

As early as 1979, when Atari launched their famous arcade game Astroids, scripted vector graphics were being used, perhaps for the first time in history. The game cabinet was even equipped with a special vector screen to display these graphics. Nowadays, however, computer screens display pixels and thus vector graphics always need to be converted to pixels before they can be displayed on a screen. But don't worry about that, 'cause it all happens automatically in an instant without you knowing.

What about scaling and zooming images?

Scaling raster graphics

Raster graphics quickly lose quality when scaling or zooming. The small rectangular pixels the image contains will become clearly visible as building blocks when the image is enlarged. Also when reducing the size of a bitmap graphic the image can reveal visible distortion because of the absence of pixels.

Try it for yourself

To illustrate this, I have created two interactive demos for you. The first is programmed based on raster graphics and the second on vector graphics (see below). Use the + en - buttons to zoom. On a touchscreen, you can also zoom with two fingers, as you are probably already familiar with in other applications. You can also move the animation. The middle button resets the position of the animation to the center and the scale factor back to one.

Now focus your eyes on the starfish in the animation and zoom in as much as possible. Pay attention to the graphics. Although your browser is trying hard to soften the 'dirty edges' the blurry pixels will quickly become visible.

Now zoom out the animation as far as possible. Especially if you're watching on a low resolution screen, like a phone, you could see disturbances arise this time as well. Your browser will try to keep displaying the animation as well as possible, but less screen pixels are available now, so compromises are needed.

Scaling vector graphics

A vector image in contrast is infinitely scalable because the mathematical formulas are scalable and thus the image maintains its sharpness at all resolutions. This is a major advantage of this format.

Now take a look at the following animation. This one looks exactly like the previous one, but this time the underlying technology is programmed based on vectors. Please focus your eyes on the starfish again while zooming. Can you see how sharp and detailed the graphics remain, independent on the zoom-factor?

Disadvantages vector graphics

Wow! Vector graphics seem to be the ideal format! They are infinitely scalable and in most cases they have significantly smaller file sizes. So why do we still use raster graphics? Unfortunately, also vector graphics have disadvantages. They are not very good at displaying color gradients and filters. Not all kind of images can thus be constructed from vectors. Especially converting photos into vectors is practically impossible and this would result in files with sizes significantly larger than the original photo.

In addition, especially when used in interactive animations, there is another important drawback of using vectors. They have to be converted into pixels everytime in order to display on screen. In case of animations up to 60 times per second. That takes a lot of computing power. Unlike raster graphics which already consists of pixels and can even be accelerated by additional tricks on your graphics card.

How about converting the formats from one to the other?

Converting files

Converting vector to raster is easy and often just a matter of exporting the image to a different file format. A raster to vector conversion however (vectorizing or outlining), is a little more complicated. When done automatically, the result will never be an exact visual copy of the original. However this can be manually fixed later. In practice though, in most cases a raster image will be redrawn or recreated with vectors by an experienced professional. When done right this leads to the best results. Once this is done the image is of course a real vector graphic and therefore infinitely scalable without any loss of quality.

Hybrid formats

There are also hybrid files, which can thus contain both raster, vector, or both. For example, PDF and EPS. These files can easily cause confusion, because it's not possible to know if the file contains vector or raster graphics just by looking at the file extension.

Next to this there are software packages being able to import the other format. For example Photoshop can import and internally work with vectors and Illustrator can import raster images, even though these programs were not designed for that originally. Their own file formats PSD and AI therefore may contain both vector and raster graphics in the same file.

High resolution displays

Finally a small trip to HiDPI and Retina. These special types of screens, wherein the pixel size have been reduced, have at least twice the resolution as regular screens. Therefore they will display graphics with more sharpness. To benefit this additional sharpness however, bitmaps must be especially made for this higher resolution. Resulting in larger file sizes too. Vector graphics however don't have this problem. They are already Retina proof, because they were designed to be infinitely scalable on all screen resolutions in the first place.

Conclusion

So these are the main differences between the two formats in a nutshell. Of course this is just scratching the surface, but you will hopefully at least have a better understanding of the main features now. And realize a one-format-fits-all doesn't exist. Both types have advantages and disadvantages and their own applications. An expert developer will always take this into account, especially while developing interactive animations for use on the web. Taking all factors of your unique project into account he or she will chose the best format for the job. Or a combination of both. In order to get the best quality and speed possible. Making sure animating graphics will be shown in a smooth and technical perfect way in all regular browsers and on all regular devices and screens. So that you can leave this to the expert while having more time for other activities!