Raster vs Vector

 Image Types

There are two main types of digital images: Raster and Vector. Both have different characteristics that can be useful depending on the required application. In addition, raster and vector images  come in various file formats that have their purposes in digital media and graphic design.

Raster Images

Raster Images are composed of a large quantity of individual pixels, each representing a point of colour, to form a whole image. The quality of raster images are very dependent on the number of pixels (PPI - Pixels Per Inch), in other words its resolution. This means that if a raster image were to be scaled up, due to the fixed number of pixels, the image would lose quality and become more pixelated. The higher the resolution, the more pixels there are to display intricate details. Thus resulting in larger file sizes.

The most common file types for raster images are JPEGs (Joint Photographic Experts Group), GIFs (Graphics Interchange Format), PNGs (Portable Network Graphic) and TIFs (Tag Image File Format).

JPEGs: This file type is frequently used and considered to be the universal file format for digital images, especially due to its capability to lossy compress images for storage and sending. Unfortunately, this means JPEGs lose some of the original image quality.

GIFs: This file format is mainly used for simple, basic images that don’t have gradients or natural shading. For the most part you’ll see them online in the form of icons, buttons or short animations as they are limited in the amount of colours it can display.

PNGs: The most prominent indicator that an image is a PNG is that it has a transparent background. This file type is capable of handling millions of colours, meaning more details displayed in the image, while maintaining data during compression. They are ideal for logos, as the transparent background allows for the image to be placed anywhere.

TIFs: These are essentially large versions of JPEGs, and are popular among photographers. They store high quality images without sacrificing data and are great for printing. However, due to their file sizes being so large, this file format takes up a lot of space on your drive and makes sharing content difficult.

Vector Images

Unlike raster images, Vector Images are made using mathematical formulas to create shapes, lines and curves. They are often used for graphics that need to be resized frequently, like icons, logos and typography. This is because it doesn’t matter if you scale them up or down, the quality remains the same and will not lose its resolution.

The most common file types for vector images are AI (Adobe Illustrator), EPS (Encapsulated PostScript), SVG (Scalable Vector Graphics) and PDFs (Portable Document Format).

AI: This is the proprietary file type for vector images that are only compatible with Adobe Illustrator. It has unlimited scalability options and are easy for sharing/storage due to their small size. Most often AI files are used for illustrations, logos and print media designs.

EPS: The file formats are often used for high quality vector graphics, illustrations and print designs. Professional printers used this file type frequently to produce detailed images for billboards, posters, etc. They are also capable of backwards compatibility, meaning they can be re-opened and edited.

SVG: Contrary to the other vector file types, SVGs can store text as text instead of shapes since it is written in XML Code. This allows them to work in harmony with websites as search engines can read SVG files, making them quite popular with web designers.

References

• CivicBrand. (2020). Vector, Raster, JPG, EPS, PNG – what’s the difference? [online] Available at: https://www.civicbrand.com/insights/articles/vector-raster-jpg-eps-png-whats-the-difference 

• Adobe (2023). Everything you need to know about JPEG files | Adobe. [online] www.adobe.com. Available at: https://www.adobe.com/creativecloud/file-types/image/raster/jpeg-file.html.

• Adobe (n.d.). GIF files: How to create, Edit and Open Them | Adobe. [online] www.adobe.com. Available at: https://www.adobe.com/creativecloud/file-types/image/raster/gif-file.html.

• Adobe (n.d.). What are PNG files and how do you open them? | Adobe. [online] www.adobe.com. Available at: https://www.adobe.com/creativecloud/file-types/image/raster/png-file.html.

• Adobe (2023). What are TIFF files and how do you open them? | Adobe. [online] www.adobe.com. Available at: https://www.adobe.com/creativecloud/file-types/image/raster/tiff-file.html.

• www.adobe.com. (n.d.). AI files - What are they and how do you open them? | Adobe. [online] Available at: https://www.adobe.com/creativecloud/file-types/image/vector/ai-file.html.

• Adobe (n.d.). What are EPS files and how do you open them? | Adobe. [online] www.adobe.com. Available at: https://www.adobe.com/creativecloud/file-types/image/vector/eps-file.html.

• Adobe (n.d.). SVG files: How to create, edit and open them | Adobe. [online] www.adobe.com. Available at: https://www.adobe.com/creativecloud/file-types/image/vector/svg-file.html.

  ‌