Understanding the difference between the two major image types: raster and vector.
RASTER IMAGES use many colored pixels or individual building blocks to form a complete image. JPEGs, GIFs and PNGs are common raster image types. Almost all of the photos found on the web and in print catalogs are raster images.
Because raster images are constructed using a fixed number of colored pixels, they can’t be dramatically resized without compromising their resolution. When stretched to fit a space they weren’t designed to fill, their pixels become visibly grainy and the image distorts. This is why altered photos may appear pixilated or low resolution. Therefore, it is important that you save raster files at precisely the dimensions needed to eliminate possible complications.
VECTOR IMAGES alternatively, allow far more flexibility. Constructed using mathematical formulas rather than individual colored blocks, vector file types such as EPS, AI, SVG and PDF* are scalable, perfect for creating graphics that frequently require resizing. Your company logo and branded graphics should be created as a vector and saved as a master file so you can use it with smaller items such as your business card and letterhead, but also on larger surfaces, such as Apparel, Signage, Banners, or or Billboard. When necessary, a JPG or PNG can be created at any resolution needed for use on the web from the vector file.
Be sure to save the new raster file in the exact dimensions needed.
*A PDF is generally a vector file. However, depending how a PDF is originally created, it can be either a vector or a raster file. Whether you opt to flatten the layers of your file or choose to retain each one will determine the image type.
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.
DIFFERENT IMAGE FILE EXTENSION TYPES AND THE BEST USE FOR EACH
JPG (or JPEG)
A JPG is a raster image that is often used for photographs on the web. JPGs can be optimized, when saving them out of photoshop, to find 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 pixilated. A JPG can’t have a transparent background so they are always in the shape of a rectangle or square with a solid background.
Best use = rectangle or square photos and photographs on your website.
PNG is another raster image type. For the general marketer, the main difference to understand between a PNG and JPG is that a PNG can have a transparent background and is generally larger and higher quality. Therefore a PNG is ideal for saving logo files for websites because they can be placed over a colored background.
Best use = logos, icons and other images where a transparent background is preferred.
A TIF (or TIFF) is a large raster file. It has no loss in quality and therefore is primarily used for desktop printing. because of load time, you generally want to use smaller images such as JPG or PNG. on the web.
Best use = images and photographs for high quality print.
An EPS file is a vector file of a graphic, text or illustration. Because it is vector it can easily be resized to any size it needs to be. An EPS file can be reopened and edited.
Best use = master logo files ,graphics and print designs.
An AI file is a proprietary, vector file type created by Adobe that can only be created or edited with Adobe Illustrator. It is most commonly used for creating logos, illustrations and print layouts.
Best use = creating logos, graphics, illustrations.
Editing vector files and saving “in outlines”
Vector files such as AI and EPS can remain editable so that we can open them back up in Adobe Illustrator and edit any text or other elements within the graphic. With images that contain text that are saved as a JPG, PNG or GIF, you would not be able to reopen and edit the text.
We often create files in Illustrator and save an AI file as our master file, but then also save an EPS version, “in outlines” which is used in production and sent to print.
We understand that many of our clients are very busy managing their own businesses - While we prefer a vector file format from those who already have a design, we also offer in-house design and vector services.