A Lesson In File Formats
Download the printable PDF here.
What are the differences between file formats?
Before we go over file formats, make sure you are familiar with these terms.
Vector vs. Raster
Vector: Uses mathematical algorithms to create a series of paths that define the graphic. These algorithms allow the graphic to be scaled to any size without loss of image quality.
Raster: Made up of a series of small squares or pixels, that can typically be scaled down without any loss of quality, but enlarging a raster image causes it to look blocky or “pixelated.”
The quickest way to determine whether an image is a vector or a raster is to first look at the file format. If it is an .eps or an .ai file it is safe to say that it is a vector. A .pdf can be either vector or raster, and .tif, .psd, .jpg, .png, and .gif are all generally raster files.
We will revisit these file formats in a little while, but first we need to talk about color profiles and provide a brief explanation of resolution.
RGB vs. CMYK
RGB: Files that contain primary color values of Red (R), Green (G) and Blue (B). The colors added together make up what we see on screens, making this color profile the best for anything that will be viewed digitally, like website content.
CMYK: Process colors containing Cyan (C), Magenta (M), Yellow (Y) and Black (K). If you have ever put ink into your printer you have noticed that the inks are these four colors, making this the better color profile for print.
Most files can be saved in either CMYK or RGB mode. You can check or modify the color mode of your graphic/image in programs such as Photoshop.
High Resolution vs. Low Resolution
Resolution is the term used to represent the quality of raster images and elements measured by DPI (dots per inch). More dots = Better quality. It is extremely important to know the resolution of your images and elements especially when you are working with projects that will be printed.
High Resolution is commonly measured anywhere between 250-300 dpi or higher. This is standard for elements that will be printed, with 300 dpi being the optimal setting. Low Resolution is commonly measured at 72-96 dpi, however anything below 250 dpi is not favorable to work with. You would use these lower resolution images on the web.
Learn more about resolution here.
Editable vs. Flat
Editable: This can be a broad term, and technically all file formats can be edited, but for our purposes this term will be used for all files that are made up of layers. A layered file means, when you open these files you can move the different pieces of the graphic around, resize different parts of the graphic and make any other changes you might need to make to specific elements. They are usually large in file size. Note that the files can only be edited in the program they were created in. (Example: the .psd file is only editable in Photoshop)
Flat: a term to describe a file that can not be edited. Files are usually saved as a flat image when they are completed to keep the file size low.
One more file terminology that is important to know:
Native: File format which the application works with during creation and can only be edited in the program that they were created in. Many of the editable file formats are also native formats.
Specific File Types And How They Can Be Used
This graphic explains why your designer may need a specific file format or why they are delivering a particular type of file to you.
Now you that you have those terms down, here is a guide to the most popular file formats.
.ai (Adobe Illustrator)
• Vector based
• Mostly used to create logos, icons, shapes, etc.
• Can be scaled and not lose quality
• Native file
.psd (Adobe Photoshop)
• Mostly used to edit and/or manipulate photos
• Raster Based
• Most likely will contain layers
• Native File
.indd .idml (Adobe InDesign)
• .indd can only be opened in the most current verison of InDesign
• .idml able to be opened in any version of InDesign
• Native file
• Preset dimensions
• Does not support transparency
• Good for images where color is important
• Good for web images
.png (Portable Network Graphics)
• Preset dimensions
• Supports transparency
• Ideal for web images
.pdf (Portable Document Format)
• Editable if .pdf was created in Photoshop or Illustrator
• Flat if created in InDesign
• Ideal for viewing digitally and printing