An Essential Guide to File Types

If you don’t deal with saving different file types every day it’s understandable to be confused when you see all the possible options. Here’s a little cheat sheet to help you avoid the back-and-forth by sending the correct file the first time.

VECTOR

“Vector files are images that are built by mathematical formulas that establish points on a grid.” (adobe.com) I dive deeper into this in my article, JPGs Are Not Vector.

• .AI (Adobe Illustrator)
  mostly used for print and logos

• .EPS (Encapsulated PostScript)
  older form of vector file
  does not support transparency

• .SVG (Scalable Vector Graphic)
  based in XML (internet)
  best for web usage

• .PDF (Portable Document Format)
  if saved as Illustrator Default

An important note that I cannot stress enough, if you open a non-vector file (like a JPG)  in a vector program (like Illustrator) and save it as an .AI, .EPS, .SVG, or .PDF file, THIS DOES NOT MAKE IT VECTOR.

IMAGE

“Raster images are constructed by a series of pixels, or individual blocks, to form an image.” (hubspot.com) Again, I dive deeper into this in my article, JPGs Are Not Vector.

• .JPG or .JPEG (Joint Photographic Experts Group)
  YES: web and print
  image quality decreases as the file size decreases

• .PNG (Portable Network Graphics)
  YES: web
  NO: print
  allows a transparent background

• .TIFF (Tagged Image File)
  YES: print
  NO: web (large size slows loading)
  doesn’t lose image quality
  allows a transparent background

• .RAW (CR2, CRW, NEF, PEF)
  original file type of a photo from camera

Resolution is very important when working with images because you cannot resize them without compromising their integrity - small files will blur if you try to make them larger (see example below). Best practice is to use 72 dpi for web and 300 dpi for print. (dpi = dots per inch)

ANIMATED

“A GIF is a kind of image file that showcases brief animations.” (socialpilot.com)

• .GIF (Graphics Interchange Format)
  fun addition to web graphics to add movement

In addition to the various file types and correct resolution, it’s important to mention color modes. Anything that is going to be used digitally should be created in RGB (red, green, blue)  while printed pieces should be CMYK (cyan, magenta, yellow, black) or Pantone.