S74 Top Tips - Vector vs Raster Graphics
Read and be inspired by our Top Tips written by our team on popular design trends, design do’s and don’ts, the creative lifestyle and much more. This series’ aim is to provide your New Zealand business with the resources you need to understand all things branding. If you have any questions, get in touch with the team here.
If you are confused about the differences between image file types, you are not alone. When starting a project, the first thing we ask for is a vector file of your logo (if we don't already have one on hand). This request often comes with a blank look or “can’t you pull the logo off my website?”.
To ensure your brand is properly represented, it is essential to understand the importance of the different file types so that your business looks consistent and professional.
Vector and raster graphics in a nutshell
Vector’s
Vector files are made up of points and lines to create paths. These can be scaled up and down without losing quality. This is because vector files are constructed using mathematical formulas. Vector file types include AI, EPS, CDR, SVG and PDF. These file types are perfect for your logos, icons and illustrations. This is because the same file can be used for all of your designs, from a mobile to a large billboard without sacrificing quality or increasing file size.
Probably the most common example of vector-based files that you use daily without even realising it, are font files. Each letter that you type is a vector graphic. You can increase the text size or zoom in as much as you want and fonts will still remain clear when viewed online or in standard editable formats such as Word documents.
Raster
In contrast, raster images are made up of many tiny squares called pixels and are often referred to as ‘bitmap’ images. If you zoomed in closely, the individual pixels can be seen. The resolution of a raster file is referred to as DPI (dots per inch) or PPI (points per inch), and is the main determining factor for increasing file size. JPG, PNG, GIF and TIFFs are common raster image types.
Web safe and print safe file types
Source Files
Source files are the files we have used to create your designs. The more well-known files include Adobe’s Photoshop, Illustrator and Indesign. All of our source files are high resolution.
High resolution
To determine whether your raster graphic images are a suitable resolution for a specific application, you need to check their pixel density. Units of measurement such as dots per inch (DPI) or pixels per inch (PPI) refer to the number of pixels in one inch of the image. These measurements become important when you use raster images in specific places, such as on the web or in print publications.
Low resolution
The web, historically, displays 72dpi (72 dots or pixels per inch). Raster images with a low DPI in the 72-100 look nice and crisp on the web. But this same low DPI image may not be suitable for printing on a brochure or packaging. To correctly print an image, it should be at least 300dpi, a much higher pixel density than the web displays. Resizing a low DPI image pulled from the web to fit the dimensions of your print project won’t work because the same number of pixels only get bigger and begin to distort.
When and how you should use the different file types
Vector file types
AI (Adobe Illustrator File)
An AI file is a vector file that can only be created or edited with Adobe Illustrator. We use Adobe Illustrator for creating logos and illustrations.
Best use = Creating logos, graphics, illustrations
EPS (Encapsulated PostScript File)
An EPS file is a vector file mostly used for text or illustrations. We can easily resize an EPS to any size it needs to be and edit them.
Best use = Your logos, graphics and print designs
PDF (Portable Document Format File)
A PDF can be used as a vector file. Depending on how your PDF was originally created, it can be either a vector or a raster file. We use PDF's for both.
Best use = Sharing web documents, forms and to send to printers
Raster file types
JPG (Joint Photographic Experts Group)
JPG (or JPEG) is a raster image that is often used for online photographs. We optimied JPGs when saving them from photoshop, for the perfect balance of small file size and high quality. On the web, you want your images files to be as small as they can be so your site loads quickly, but large enough to still appear crisp and not pixelated. A JPG can’t have a transparent background.
Best use = Photographs on your website
PNG (Portable Network Graphics)
PNG is another raster image type. Generally, the main difference between a PNG and JPG is that a PNG can have a transparent background and is typically larger/higher quality. Therefore a PNG is ideal for saving your logo files for your website because they can be placed over a coloured background.
Best use = Your logos, icons and other images where a transparent background is preferred
PSD (Adobe Photoshop File)
A PSD file is a layered image file used in Adobe Photoshop. PSD, which stands for Photoshop Document, is the default format that Photoshop uses for saving data. We use PSD files primarily for editing. Being able to revise using multiple individual layers means we can edit and re-edit as we see fit.
Best use = Re-editable images, photographs and high quality prints
That’s a wrap
Working with images can be confusing, but keeping these facts in mind will help eliminate much of the hassle. We’re always here to help or answer any questions. Before you go, here’s a little bit about us: We are an experienced Palmerston North digital marketing agency that can help with marketing and growth, social media advertising, search engine optimisation, Google Ads, marketing strategy and more. For a free consultation with one of our team members, contact us today.