Vector Graphics

Vector graphics are composed of intricate paths made up of a collection of points and lines based on mathematical equations defined on a Cartesian plane. Since it does not use individual pixels, vectors tend to have a smaller file size and are resolution-independent and thus fully scalable without losing quality. This makes vector graphics perfect for logos and clip art which need to be displayed in different sizes.

However, complex, detailed images such as photos requiring high colour depth (e.g. broad colour range with subtle variations) may not benefit from using vectors. Additionally, when loading vectors, it may take some time for the graphic to be rendered as the mathematical algorithms need to be processed. 

Types of Vector Files

Computer Graphics Metafile (.cgm)

The standard file format for 2D vector and raster images, and text. While it is no longer common as a file format, it is well-suited for technical and industrial illustrations (e.g. schematics).

Scalable Vector Graphic (.svg)

Developed by the W3C (World Wide Web Consortium), it is the standard XML-based (eXtensible Markup Language, i.e. uses a text format to describe how the image should appear) vector image format for rendering 2D graphics on the internet. It is a web-friendly option because it can be styled by web designers using CSS (Cascading Style Sheet) and boasts faster load times on browsers due to its smaller file size. The other benefit lies in its scalability, which makes it useful for printing large, high-quality graphics. 

Other vector file extensions include .PDF (Portable Document Format), .AI (Adobe Illustrator), .DXF (Drawing Exchange Format), and .EPS (Encapsulated PostScript).

Raster Graphics

Instead of using points and lines, raster graphics use a grid of tiny pixels to represent an image. Therefore, the original version can only be scaled down as any increase in size will cause the image to become blurry or pixelated. However, with the colour of each pixel able to be altered, subtle colour gradations and a wider colour spectrum can be achieved, making it best for detailed graphics such as digitised photographs and scanned artworks. Editing raster images is also easier by making use of common editing programs such as Photoshop or Microsoft Paint.

Types of Raster Files

Bitmap (.bmp)

The standard format for basic raster graphics developed by Microsoft. What the “bit” in “bitmap” refers to is the colour depth of the image. The colour of each pixel is individually defined by a binary digit, consisting of the values 0 or 1. At its most basic level (1-bit), a pixel will either be defined as black/“off” (0) or white/“on” (1). As the value of the bit increases to 4, 8, 16, 24 or 32-bit, the range of colours that can be represented will exponentially increase.

For example, a 4-bit, or a 4 binary digit code, can represent up to 16 different colours (those who have learnt about permutations in Maths will know that with 2 values, there are 16 possible combinations for a 4-digit code; 2^4 = 16). Since each pixel is stored individually, the file size can become very large very quickly, which is not ideal for web use. 

Graphical Image Format (.gif)

Perhaps most commonly known for its ability to combine frames to create simple looped animations. It features lossless compression and background transparency, which is useful for adding animations to a website. However, it can only support up to 256 indexed colours (i.e. 8-bit) which does limit how complex the graphic can be (especially in terms of colour).

Joint Photographic Expert Group (.jpg/.jpeg)

A lossy compressed format most suitable for photos. There are several reasons for this, including support for 24-bit colour depth that offers about 16.7 million colour values and the lossy compression method that keeps the file size under control, especially for high-resolution, colour-rich photos. It is also a standardised image format for sharing to different platforms.

Tagged Image File (.tif/.tiff)

Popular in the photography and publishing industry for its flexible compression methods – lossless, lossy or uncompressed – that allows photographers to store images while retaining the original high-quality. However, preserving the original resolution and details will lead to large file sizes that make it difficult to share or upload on the web. Photographers may still prefer this format though because it enables them to tag the image with extra information, such as its resolution and copyright. 

Portable Network Graphics (.png)

Created to replace the GIF and surpass its limitations by introducing a broader colour palette (24-bit) while still offering lossless compression and background transparency. The larger file size may not be favourable for webpage loading times but its ability to handle transparency and high-quality images still make it a common format in web design.