As a designer, I am constantly asking clients for images to help me better promote their brand. Whether it be their logo or photos of their staff and/or events, it’s not at all unusual that I receive images that are unuseable, and when I try to explain why, clients often seem stunned or confused. After all, the images are digital, so can’t they just be converted? Often, the answer is no, they can’t. File formats exist to serve different circumstances for use, which by nature, makes them not right for all uses and circumstances. I hope the following “cheat sheet” helps to clear up some of the confusion.
Vector vs. raster
Let’s start by exploring the difference between the two major image types out there – raster and vector.
Raster images use pixels to form a complete image. The most common types of raster images are JPEGs, GIFs and PNGs. As a reference, almost all of the photos found on the web and in print materials are raster images. Since raster images are constructed using a fixed number of pixels, they can’t be resized to create a larger image without causing the pixels to become grainy and the image to become distorted. Therefore, it is important that you save raster files at the exact dimensions you need in order to eliminate possible problems.
Vector images are more flexible. They are constructed using mathematical formulas rather than pixels, vector file types such as an EPS or AI are excellent for creating graphics that frequently require resizing. An example of this is your company logo. This allows you to apply your logo to a variety of mediums ranging from business cards to corporate vehicles without compromising the quality, because as a vector, your image is truly scalable.
High vs low resolution
To determine whether your image is a suitable resolution for your specific project, you need to check its DPI (dots per inch). DPI is a measurement that specifically applies to raster (pixel) based images. Most commonly there are two sizes, 72 DPI (72 dots or pixels per inch) and 300 DPI (300 dots or pixels per inch). Raster images with 72 DPI are best used on the web while printed images should be at least 300 DPI. Resizing a low (72) DPI image pulled from the web to fit the higher (300) DPI requirement of your print project, is a common expectation. But attempting to resize an image in such a way enlarges the pixels, causing the image to become fuzzy and distorted. Often, so much that the pixels become large enough to see. The image becomes “pixelated.”
What is a JPEG, PNG, GIF, TIF, EPS, AI?
JPG
JPG (or JPEG) is a raster image that is often used for photographs on the web and is usually from the RGB colorspace. 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 sharp 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.
PNG
PNG is another raster image type. A PNG can have a transparent background and is generally larger and of higher quality. Therefore a PNG is ideal for logos or photo cut-outs on your website because it can have a transparent background and can appear on your webpage as a shape that overlays a colored background.
GIF
A GIF is another raster image type. A GIF is formed from up to 256 colors from the RGB colorspace. The fewer the colors and shades contained in the image, the smaller the file size. So, a GIF is ideal for images that use just a few solid colors and don’t have gradients or natural shades. You wouldn’t want to use a GIF for a photograph, for example, but its ideal for a line drawing. A GIF can also be used for animations. Ideally, ones made with line drawings and not photographs.
TIF
A TIF (or TIFF) is a large raster file. It is created using the CMYK color model for printing on a four-color press and is significantly larger in file size than its JPEG counterpart. TIFs don’t have to be 300 DPI but most often are, as they are made for digital printing or traditional printing press use, which requires a resolution of at least 300 DPI.
EPS
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 and can be edited in virtually any design program. Signmakers, in particular, often require EPS files because they can be enlarged to nearly any size without any loss in quality.
AI
An AI file is a vector file created by Adobe that can only be created or edited with Adobe Illustrator. It is most commonly used when creating logos and illustrations for print layouts.
Which format is best?
Working with images can be confusing, and unfortunately there is no one right answer. Ultimately it depends on the application of the image but this guide should help you eliminate the guessing next time you have a project and are trying to gather your images.
~ Bethany Howell, art director
