Pixel graphics or vector graphics? Comparing the pros and cons

As well as text-based content, images are key elements of any website. In web design, there are two different types of computer graphics, which differ fundamentally in their properties: pixel graphics and vector graphics. We tell you how these graphic types are built and how their differences determine which applications they’re best suited for.

The smallest unit of every pixel graphic are picture elements, also known as pixels. Each of these units is assigned a special colour value. As these computer graphics are composed of square-shaped pixels that are arranged in grids, they’re also referred to as raster graphics. The main features used to describe pixel graphics are the number of picture elements in use and the colour depth of these pixels. And while the total number of picture elements determines a graphic’s height and width (and its resolution), colour depth defines the colour and brightness values for each picture element.

These properties allow pixel graphics to depict detailed images. Most people are familiar with the term, pixel, through digital cameras and scanner images. Given that pixel graphics consist of a fixed number of picture elements, both quality as well as the amount of memory needed for storage are dependent on the number of pixels. The more picture elements a raster graphic contains, the larger the image it’ll be able to display and the more storage its file requires. This interdependency between image quality and pixel number means that pixel graphics cannot be scaled-up without suffering losses to quality.

Unlike pixel graphics, vector graphics aren’t composed of individual picture elements; rather they are made up of geometric primitives, like lines, circles, or curves. These are defined through parameters such as beginning points, ending points, radii, edge length, line width, colours, and filling patterns. Modern vector drawing applications are also able to render colour gradients as well as transparency. These objects aren’t defined as an apposition of pixels; instead, they are logically described according to their properties. For example, all that’s needed to describe a simple circle with vector graphics is: the position of its center, the radius, colours and line weights for depicting the object in different sizes.

This is where vector graphics’ biggest advantage over raster graphics can really be observed: given that a vector graphic’s saved parameters can be recalculated to fit new sizes, these images can be scaled up without losses to quality. By comparison, a circle depicted through a pixel graphic will display ‘jaggies’ (stair-like lines where there should be smooth curves instead) or an aliasing effect. In contrast to pixel graphics, the display size of vector graphics has no effect on memory requirements.

Given that all display mediums (screen, print) only show images as raster graphics, vector graphics have to be converted (rasterisation) before they can be depicted. Depending on the described object’s complexity, this step may be costly in terms of both time and computing capacity.

There’s a wide selection of graphic programs for creating and editing both raster and vector graphics; these support a range of specific file formats. The following chart shows a sample of common graphic formats and editing programs.

Vector graphics’ ability to be scaled up without loss of quality makes them especially well-suited for displaying diagrams, company logos, geometric figures, fonts, icons, and technical drawings. On the other hand, complex images, like digital photos featuring different color and brightness values, cannot be depicted without losses to quality. Here, it’s best to use pixel graphics.