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 fun­da­men­tal­ly in their prop­er­ties: pixel graphics and vector graphics. We tell you how these graphic types are built and how their dif­fer­ences determine which ap­pli­ca­tions 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 color 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 color depth of these pixels. And while the total number of picture elements de­ter­mines a graphic’s height and width (and its res­o­lu­tion), color depth defines the color and bright­ness values for each picture element.

These prop­er­ties 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 in­ter­de­pen­den­cy 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 in­di­vid­ual picture elements; rather they are made up of geometric prim­i­tives, like lines, circles, or curves. These are defined through pa­ra­me­ters such as beginning points, ending points, radii, edge length, line width, colors, and filling patterns. Modern vector drawing ap­pli­ca­tions are also able to render color gradients as well as trans­paren­cy. These objects aren’t defined as an ap­po­si­tion of pixels; instead, they are logically described according to their prop­er­ties. For example, all that’s needed to describe a simple circle with vector graphics are: the position of its center, the radius, colors 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 pa­ra­me­ters can be re­cal­cu­lat­ed to fit new sizes, these images can be scaled up without losses to quality. By com­par­i­son, 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 re­quire­ments.
Given that all display mediums (screen, print) only show images as raster graphics, vector graphics have to be converted (ras­ter­i­za­tion) before they can depicted. Depending on the described object’s com­plex­i­ty, 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 es­pe­cial­ly well-suited for dis­play­ing diagrams, company logos, geometric figures, fonts, icons, and technical drawings. On the other hand, complex images, like digital photos featuring different color and bright­ness values, cannot be depicted without losses to quality. Here, it’s best to use pixel graphics.