If you are confused about the differences between most image file types, you are not alone. When starting a project, the first thing we ask the client is a vector file with their logo. However, the request often comes with a blank look or “Can’t you pull the logo off my website?” Such responses. As a marketer, it is essential to understand the importance and role of different image file types to ensure your brand is properly represented and communicate better with designers, developers and printers.
Vector files, made up of points and lines to create paths, can be scaled up and down without losing quality. Constructed using mathematical formulas rather than individual colored blocks, vector file types such as AI, EPS, CDR, SVG and PDF are makes vector files the best format for graphic assets such as illustrations, icons and company logos, as the same file can be used for designs ranging from a mobile app to a large billboard without sacrificing quality or increasing file size.
Probably the most common example of vector-based files that we use daily without even realizing are font files. Each letter that you type is a vector graphic. You can increase 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.
Although most online graphics are still raster-based, the introduction of vector-based SVG files allows elements like logos, illustrations and icons to be used in apps and web development. This will be an important factor moving forward with responsive site designs, as layouts and design elements are adjusted to fit various screen sizes and resolutions like retina displays.
Raster images are made up of many tiny squares called pixels and are often referred to as ‘bitmap’ images. When zoomed in closely, the individual pixels can be observed. 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.
Essentially all digital photography is raster-based. Most graphic files found online are also raster-based and saved for a screen resolution of 72 DPI, a larger file size is usually required for use in printed material where the standard resolution is 300 DPI
High resolution or low resolution?
To determine whether your raster 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 attempt to use raster images in specific places, such as on the web or in print publications.
The web, historically, displays 72dpi (72 dots or pixels per inch) – a relatively low pixel density however most modern displays are now much higher. That said many images on the web are still in that 72-100 dpi range. While monitors can display higher resolution the web also needs to optimized for speed so images around 100 dpi hit the sweet spot for looking great on a screen but also loading quickly. 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 finite number of pixels only get bigger and begin to distort. For example, let’s say you want to print your logo at 2″x3″ on a brochure. If have a 72dpi jpg of your logo and it’s 2-inches by 3-inches, it will need to be “stretched” to more than 3 times the size to get it up to 300dpi. That 72dpi logo may look great on your computer monitor, but when it prints at 300dpi it will look pixilated. Instead you should use a vector version of your logo (.EPS or .AI) or create a raster (JPG) with the exact dimensions desired and at 300dpi.
Various image file extension types and best use for each
Typically you can distinguish between raster and vector formats by looking closely at the edges of graphic elements like text and logos. File extensions will also suggest which category a file will fall under, though there are always exceptions to the rule.