Updated 6/2021.

At least once a week I'm sent files that were *gasp* downloaded off the internet, or a tiny, pixelated version of a complicated logo — which, inevitably, falls apart in print or even on the web. This can result in higher printer fees and more time recreating or digging up the right files.

Graphic file formats don't have to be a mystery once you learn the basics, and your printer (and designer) will thank you for it!

For print:
  • .AI [Adobe Illustrator]
  • .EPS [Encapsulated PostScript]
  • .TIFF [Tagged Image File Format]
  • .PDF [Printer Document Format]
For web/digital:
  • .JPEG or .JPG
  • .GIF [Graphics Interchange Format]
  • .PNG [Portable Network Graphics]
  • .SVG [Scalable Vector Graphics]

Vector vs. bitmap graphics

Why the distinction? It's vector vs. bitmap graphics.

Vector graphics, like those created in Adobe Illustrator, are made of shapes created by mathematical equations, and can be enlarged to pretty much any size with no loss of quality.

On the other hand, graphics created in Adobe Photoshop [and of course photos!] are bitmap, or pixel-based. This isn't an absolute, but for our purposes it's a good distinction. When you zoom in on a bitmap, like below, you can start to see the pixels, and the loss of quality of the original graphic is pretty obvious. The JPEG may look all right on screen, but consider handing out materials with a blurry logo—definitely not professional.

VectorBitmapExample

If you do have only a bitmap, it should be at least 150dpi [dots per inch] or, ideally, 300dpi without enlarging it to still look good.

Looking further at TIF, PDF, EPS and SVG

Even within these two big distinctions, there are further breakdowns.

TIFFs should only be used at 100% of size or smaller, and a PDF or EPS file is usually ideal for printing. Keep in mind, if you just re-save a JPEG or other web file as a EPS or other print file, it won't make that artwork go up in quality! If the graphic data isn't there, it's just not there.

What about SVG?

Newer to the game is SVG or Scalable Vector Graphics format. Though this is based in vector, it's meant for web and digital channels. Think of logos and line art, not photographs. The advantage of SVG is that it looks clean and crisp no matter how it's displayed, and it can be optimized to a very small size, so you're not using up your server's resources.

GIFs, JPEGs and PNGs, oh my...

Also, GIFs, JPEGs and PNGS exist for a reason. GIFs often create the smallest file sizes, and support transparency, whereas JPEGS do not allow transparency. JPGs can often be smaller in size than PNGs.

PNGs are hit or miss, but offer transparency and, to me, a cleaner transparent look since there's usually more data to give a cleaner transition to transparency.

Make sure you have each of these graphic file formats on hand, of your logo and any other critical brand materials—it'll save time and money!