Graphic Design File Types: Raster vs. Vector
As a graphic designer or artist working with outside media firms or interactive agencies, you may encounter requests for your digital artwork in different formats. Some of these providers will ask for your designs to be sent as vector files and others will need raster files, and they may ask for these by specifying a three-letter file extension. They also may require certain bitmap dimensions, or a minimum resolution in pixels per square inch. So how can you make sure your artwork meets these requirements?
This article will help make sense of different file formats. We will take a look at the differences between raster and vectors—two types of graphic files, and give guidance on when to use each. We will also explain what bitmap resolution is, and help you figure out how to make sure your file is in the right dimensions.
Raster vs. Vector Files
Raster graphics are also known as bitmap graphics, and are made of thousands of tiny pixels arranged in a grid to form an image. Vector graphics are made up of curves that form paths and shapes, defined by mathematical equations. The main practical difference in the two types is that vector graphics can be scaled without any loss of quality. This makes vector files incredibly versatile, as a small image viewed on your screen can be scaled to the size of a billboard and remain just as clear. Raster graphics only retain quality if they are scaled down, but when a raster graphic is enlarged it becomes pixelated, and can look grainy or less clear.
While raster graphics are best for photographs and other types of images with continuous tones, when working with illustrations and graphics with clean lines and shapes, it’s best to use vector graphics. Raster graphics, because they are made of pixels, can amount to quite a large file size. The higher the pixels per inch (PPI) or dots per inch (DPI), the higher the clarity, but the file will be larger and will take up more storage space. This is another reason some service providers will request vector files, as vector images are more compressed and thus easier to transfer and store.
File Types
The most popular raster graphic file formats include JPEG, PNG, and GIF. Popular vector graphic file formats include SVG, AI, PDF and EPS. It's also worth noting that many popular graphic design software tools like Adobe Illustrator, Photoshop can handle both raster and vector graphics.
Sometimes you may come across popular raster graphic formats that contain more than a simple image. Their layers can be switched on and off, allowing for visibility or editing of certain elements of an entire composition. An example of these formats is Photoshop Document (PSD) which is used by Adobe Photoshop; other less commonly used formats include PSP (Corel Paint Shop Pro) and XCF (Gimp). Finally, Portable Document Format (PDF), while mainly used as a document format, often holds vector as well as raster elements and is highly versatile, making it perfect for digital printing purposes.
Vector File Types
Most common vector file formats include the following:
To know more in-depth information about each type, and when to use them, you can read the article on the most widely used vector formats.
Raster File Types
Here’s a list of the most popular raster image formats used, along with an explanation of each.
JPG
JPG (or JPEG) files store graphical images. They are examples of bitmap images and typically smaller in size than their counterpart, the PNG image. JPG files support a full 24-bit palette of colors, so these are the best file type to use for photos. Most photos you see displayed on websites are likely to be a JPG file. JPG is one of two formats of graphic images (along with GIF) that you will find most commonly used on the internet.
GIF
GIF stands for Graphics Interchange Format, and is a bitmap (meaning that the image consists of pixels). This file type was developed by CompuServe back in 1987 and you will find these file types as graphics on websites and web applications, especially in animated images, banners and buttons. GIFs don’t support the full range of colors, like JPG format, so this format isn’t best for saving photos.
PNG
PNG files are used to store images in a clear format. PNG stands for Portable Network Graphics Files. PNG files help in storing photos and images with continuous tones, and are more compressed than JPGs. If you need to reduce the size of an image without too much quality loss, PNG can serve as a good choice. Great addition is the availability of a transparent background in this format.
TIF/TIFF
TIF format stands for Tagged Image File format. TIFF is the main file format used for storing image matrixes, and is mostly used for printing. They are usually large format files and though they’re used today, TIFs have mostly been superseded by the more modern PDF format since the early 2000s.
BMP
BMP is the abbreviation for bitmap file. Bitmaps store two-dimensional images and can be viewed on a screen independent of a graphics processor. A bitmap file uses an array of dots called pixels to represent images. BMP files are commonly used with Windows. These are relatively large files, and are not supported by all browsers.
HEIC
HEIC is Apple’s version of the High Efficiency Image File Format used to save images on iOS devices. This format works well for devices because it compresses photos into a small file size without losing image quality. HEIC can be opened on Android devices using Google Photos, however to work with an HEIC image on a Windows machine requires a tool for the conversion.
Converting Files to Vector With Amadine
It is easy to convert a vector file to a raster file, but it isn't always possible to do the opposite. This is important to know in case you aren’t sure which format to create, and need to remain versatile. If you want to stay open-ended about how your design can be used, it may be a good idea to create your art as a vector.
Amadine, as you may know, is a vector drawing app, but it can also export into some raster file formats, such as JPEG, TIFF, and PNG if the need may be. Amadine can also open (import) raster formats like JPEG, TIFF, PNG, HEIC (iPhone photos.) The imported raster format files will be seen by the app as a whole (a picture), not separate elements, like in a vector file. If you need to convert a raster image into a vector file, you can use one of the image vectorizer tools.
File Dimensions
The dimensions, or aspect ratio, of your image is often given as a number specification. A media firm might tell you they need your image in 9:16, for example, where 9 will represent the width of your image, and 16 will represent the height. This is something to be aware of when creating your design, as sometimes you won’t be able to change the dimensions and still preserve your design after it’s created. When working in a vector file, you can use Amadine to change the aspect ratio by using a clipping mask. With raster files, it depends on the individual image to know whether it can be converted to different dimensions, so if you’re working with an outside provider this is good to know up front.
Use Cases for Raster vs. Vector Files
Logos are best designed as a vector and saved in EPS format. Logos always should be able to be displayed in high resolution. If you need a raster graphic of the logo later, as in for a web page, you can easily convert the file from vector format.
Vector files are ideal for product artwork, since images can be sized up or down to fit different types of product packaging, labels and displays.
Web graphics should be saved in a format that can be read by all browsers, so using JPG, GIF and PNG files is the best practice. These file types should also be used for online banners or footers, not just images within the web page.
For printing purposes, typically PDF, EPS or TIFF formats are requested. You typically will need high resolution for printing, and your design has to retain proportions. The printer will usually specify resolution requirements, and you can edit these within your file.
The optimal format for photos is JPEG, because photos are already bitmap images. JPEG allows for adjusting the compression level, so you can balance between image quality and file size.
