Comparing raster graphics and vector graphics

Graphic data, from mundane images to complex design layouts with many elements and layers, can be packaged in a variety of ways. And the difference between them is much deeper than it might seem at first glance. In particular, all graphic formats can be divided into two groups — raster and vector.

Raster and vector graphics are the two main ways to reproduce visual information. These groups serve different purposes and are designed to accomplish different design goals.

In this article, we will understand what is the difference between raster graphics and vector graphics — and what is better to use for various purposes.

Raster graphics

Raster graphics means the representation of an image in the form of a grid of individual pixels. Each of them has its own address and is painted in a certain tone. With sufficient resolution, individual pixels become completely invisible to the human eye and merge into a separate image.

It is in raster graphics that data is displayed on the monitor screen — since the display consists of individual pixels. Photo and video cameras are filmed in the raster — since the sensors are a matrix of individual light-sensitive sensor-points. Printers print in raster graphics — each drop of toner is a separate pixel.

That is why the resolution is crucial for the «picture quality» in raster graphics. The more pixels per square centimeter or inch, the smoother the visual appears.

If you take any raster image and start scaling it with a simple increase, then at some point the “picture” will crumble into a grid of individual dots-pixels. It will be almost impossible to understand what is depicted on them. That is why scaling raster graphics is not recommended.

For example, if you plan to print a company logo on a large canvas — on a pillar, banner or sign — then sending its source in raster graphics to a printing house would be a very bad idea. The actual resolution will be small and the canvas size will be large. And the logo will “crumble” into separate pixels, which, when approached, seem extremely unpleasant.

But at the same time, it is raster graphics that are used when working with various realistic images. And it’s not just that cameras shoot in raster. The use of raster graphics allows you to saturate the image with small details, transitions, halftones, shadows and other elements that provide realism.

In addition, raster graphics when viewed minimally loads computer resources. That is why it is used in the layout of websites, embedded in various documents and files. Raster formats are JPEG/JPG, BMP, PNG, TIFF, ICO and many more. RAW, which stores «raw» data from camera sensors, also applies to them.

So, let’s sum up.

Thus, if you plan to do something «for yourself» or edit photos or photorealistic graphic files, then it is better to choose raster formats. But they are not suitable for printing.

Vector graphics

Vector graphics means the representation of an image in the form of a set of mathematical formulas. They describe the location of anchor points and the geometric shapes that connect them. That is, in fact, a “vector” is just a mathematical graph, only quite complex.

For example, some circle in vector graphics is described by two formulas. The first shows where its center is. The second is the radius of the circle. In this case, the canvas of reference points is not necessarily a raster canvas — zero and the maximum length of the axis can be specified. Then the coordinates of the reference point are described by percentages.

When drawing a circle, the computer is given a command — «Draw a circle with a radius of 10% and a center with coordinates x=12%, y=52.36%».

Of course, the description of how vector graphics work, given above, is a simplified one that was used back in the 1980s. Now the technology has become a little more complicated, but the general principle has remained unchanged.

Vector graphics are devoid of the main problem of raster graphics — it allows you to easily scale the image as much as you like. The “picture” will not lose its smoothness, sharpness, or clarity, no matter what canvas it is displayed on — even on a 23-inch computer screen, even on a 6 × 3 meter billboard, even on a banner that closes the 27-story house (like advertising Samsung in the world — the height of the canvas is 80 meters, the width is 40 meters).

But this will have to sacrifice detail and realism. The more “elements” a “picture” has, the more complex the set of formulas that describe it. And to display a “picture” or simply draw it, a huge amount of computer resources are required. Complex vector images cannot even be opened on an old laptop.

This feature of the «vector» has led to the fact that these formats are used very rarely and — in most cases — in very highly specialized areas. For example, in the design and drawing of drawings (CAD systems like AutoCAD, Compass 3D, or even Microsoft Visio use exactly the “vector”), mapping and various diagrams. In addition, vector graphics are used in printing and design of promotional materials.

In web design, vector graphics are practically not used — precisely because they load the computer when viewed. However, she has an alternative in this area — CSS-drawing. In this case, the graphic component of the page is assembled from the most simple shapes — lines, rectangles, circles and triangles. But for CSS-drawing, a high professionalism of a web designer is required, otherwise there is a risk of getting something completely psychedelic in the output.

So, let’s sum up.

As mentioned above, vector graphics are best used in the field of printing. Then it will provide sufficient «smoothness» and «beauty» of the picture, regardless of the size of the canvas. But for drawing and processing photos, it is recommended to limit yourself to a raster.

In addition, vector graphics are easily rasterized — that is, converted into a pixel image of the desired resolution. But raster to vector is converted with difficulty and loss of quality.

Which is better — raster or vector graphics?

So, if you need to process a photo, embed an image into a website or any document, then it is better to choose raster graphics. In vector, it is recommended to draw drawings, diagrams and maps, as well as carry out prepress preparation.

Let’s compare these two options.

It is worth noting that to improve computer performance (if necessary), it is better to use vector graphics for simple images with low detail — it loads the graphics subsystem less than with pixel-by-pixel rendering.