Updated 10/2021.
At least once a week I'm sent files that were *gasp* downloaded off the internet, or a tiny, pixelated logo — which, inevitably, looks terrible 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:
| For web/digital:
|
Vector vs. bitmap graphics
First, we need to differentiate between vector and 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, photos, and graphics usually created in Adobe Photoshop (though this isn't an absolute, as Photoshop can create vector graphics now) 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—not ideal.
If you only have a bitmap, it should be at least 150dpi (dots per inch) or, ideally, 300dpi without enlarging it to still look good.
Looking further at AI, EPS, TIF and SVG
Even within these two big distinctions, there are further breakdowns:
Adobe Illustrator files
Adobe Illustrator files are scalable and can also contain multiple layers and effects such as transparency, blending modes, shading, stroke weights and more. Ideally your logos and infographics are created in this format.
EPS files
Similarly, EPS files are generally created with Illustrator and can also include bitmaps. It's an open source format, meaning that it can be ported to other programs without using Adobe Illustrator.
TIF files
TIFs are bitmap graphic files like JPEGs and GIFS, which means they use lossy compression to create smaller graphic files.
Lossy compression is a way to make files smaller by eliminating information from the data.
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.
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. It's great to reduce the sizes of your logos and infographics without losing quality.
GIFs, JPEGs and PNGs, oh my...
Also, GIFs, JPEGs and PNGS exist for good reason. GIFs often create the smallest file sizes, and can be animated and transparent, whereas JPEGS do not allow transparency. JPGs are lossy and can be smaller in size than PNGs.
PNGs offer a bit more quality than GIFs, can be transparent, and, a crisper 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!