Pixel vs Path: Comparing Raster and Vector Images

In Essence of Digital Images: Building blocks article, I covered the various aspects of digital images like building blocks of an image, color spaces, color encoding & its representation, compression, and more. Those topics mainly involved pixel-based images. However, in this article, I want to cover two primary categories of images.

1. Raster images
2. Vector images

Raster images

Raster images are also known as bitmap images. When we talk about images in general, implicitly we are referring to raster images most of the time. Raster images are made of small squares known as pixels - The smallest building block, arranged/represented in the setup of rows and columns resulting in a grid expressed as width x height (For ex. 1920x1080). In math terms, it is a matrix. Each pixel is assigned a numerical value that represents the intensity of the color.

[Grayscale] The size of the above grid is 8 (rows) x 8 (columns); hence the dimension of the image is 8x8 pixels and each square block is the pixel with the associated intensity or color value between 0 and 256. It has one channel.

[RGB] The size of the above grid is 8 (rows) x 8 (columns); hence the dimension of the image is 8x8 pixels and each square block is the pixel with the associated intensity or color value between 0 and 256 for each channel in vertical order (R, G, B). It has three channels.

The code to generate the above images can be found in this GitHub repository. Please refer raster.py

Common file types that fall under raster images: JPEG, PNG, GIF, BMP, TIFF, and more.

In general, the quality of the raster image is directly tied to the dimensions of an image; i.e. how large the grid is. 1080x1080 pixels image is better and will have more visual details/information than a 512x512 pixels image when it is viewed at the same size. However, other aspects like bit depth, compression, color mode, file format also affect the quality of the image in terms of visual details and file size. Higher image dimensions (pixels) typically result in larger file sizes.

Raster images are widely used in photography, web graphics, scanning, medical imaging, and more. It is also used where capturing real, critical details and color gradients are important.

Software like Adobe Photoshop, GIMP but not limited to these are generally used while working with raster images.

Vector images

Vector images are made up of lines, curves, paths, angles which has start and end point. These lines, paths, shapes can be any geometric representation. And mainly they are driven by mathematical expressions. Pixels, grids, dimensions are not applicable to vector images. One can scale vector images indefinitely to any size and the quality of the image will not deteriorate.

Common file types that fall under vector images: SVG, AI, EPS, and more.

Vector images are widely used for designing logos, icons, illustrations, computer-aided drawings, engineering/architectural plans or layouts, and other graphics designs where image scalability, clarity, and precision/accuracy are important.

In the above example, I have attempted to show the scalability comparison between vector and raster images. The quality of the vector image of “@” on the left is not impacted when scaled and on the other hand, the quality of the raster image of “@” on the right is deteriorating/pixelated when scaled. Hence, when scalability & small file size is important, vector images can be considered.

The code to generate the above images can be found in this GitHub repository. Please refer raster_vs_vector_img.py

Software like CoreDRAW, Adobe Illustrator but not limited to these are generally used while working with vector images.

Comparison

• The primary advantage of vector images over raster image is, it can be resized/scaled without losing the quality whereas, raster image gets pixelated when scaled
• Raster to vector image conversion is complex and often manual adjustment by an experienced user is required. Simple graphics conversion would be straightforward but it is much more challenging to translate the detailed photograph accurately into vector format. In contrast, vector-to-raster translation is simple depending on factors like resolution, output size, and potential loss of clarity.
• Raster images are well-suited to represent intricate details and complex color gradations. Vector images are more suited for illustrations with solid colors and sharp edges.
• In terms of file size, a raster image is larger in size since it holds more visual information and more (thousands/millions) pixels, whereas a vector image file size is comparatively smaller since it only holds the mathematical expressions that would determine the designs. However, raster images can be compressed which I will cover in an upcoming article.
• Raster images are easily accessible and can be opened using various everyday applications but to access/open vector images often requires specialized software.

The choice between using raster vs vector depends on the use cases. For photographs where capturing real details is important, raster is the way to go. In the scenario where scalability, precision, accuracy are important, vectors are more suitable. The well-known ImageNet dataset contains raster images.

Note: In the upcoming articles, I will be mainly talking about the raster images. At the same time, it is important to understand the difference between raster and vector images.

If you have any questions, comments, or feedback please leave them below. Subscribe to my channel for more.