Understanding file formats

by Amy on March 12, 2009

When we design a logo for you, we typically provide it to you in several different formats. Each format is best suited to a particular purpose, and it’s important to know when to use each one so that you get the best results. When I deliver your files, I organize them in folders by type, so that you know which format to use for what purpose.

Before I explain the various file formats, I need to explain something extremely important:

Vector vs. Bitmap

Notice the visible pixels (squares) in the enlarged bitmap.

Notice the visible pixels (squares) in the enlarged bitmap.

These are the basic 2 flavors of file formats. Vector formats are “resolution independent”:  that means it can be scaled as big or small as you want, and the lines will always be crisp and sharp. Bitmap formats are “resolution dependent,” meaning that you can’t scale them larger, or they will start to look choppy.

A vector file is created with flexible points that use math to shape the lines. Think of the lines as stretchable rubber bands. If you increase the size, it’ll keep its shape but just get bigger. A bitmap file, on the other hand, is like a mosaic of tiny squares, called “pixels.” If you zoom way in, you will see the squares even bigger, and it won’t look good.

You should ALWAYS keep a copy of your logo in a Vector format, because there will often be occasions when you need your logo to be printed at a very large size—on your storefront sign, on tradeshow banners, etc.

Also, your printer and web designers will always need a vector version of your logo for anything they do (letterhead, business cards, websites, etc.).

Okay, now that you understand the difference between vector and bitmap, onto the file formats:

File Formats

1. WMF or EMF

(”Windows Metafile”) or EMF (”Enhanced Metafile”) – either of these formats are what you’ll use in Office applications like Word, Powerpoint, or Excel if you want to show them on screen or print them on your office printer. Characteristics are:

  • Scalable vector. You can make them as big as you want and they won’t get blurry.
  • Can support transparent backgrounds.
  • Color type: RGB

What’s the difference between WMF and EMF? EMF tends to display curves more smoothly, and is generally the better choice for office applications. But WMF is most commonly supported.

2. EPS

(”Encapsulated Postscript”) – Use this format for sending to a commercial printer, a sign maker, a publication, or anyplace else that needs a professional-level file. Confusingly, EPS can come in 2 different flavors: “vector” or “bitmap.” The EPS files I provide you are always vector. Characteristics of vector-format EPS files are:

  • Scalable vector.
  • Can be any type of color (RGB, CMYK or Spot) – I will give you CMYK and Spot for your logo.
  • Can support transparent backgrounds.

Don’t try to use EPS in Office applications– they tend to have trouble, and make non-postscript printers–the type you most likely have in your office–choke.

3. GIF

(“Graphics Interchange Format”) – Use this format for web logos with solid colors. Characteristics of GIFs:

  • NOT scalable (bitmap format).
  • Can support transparent backgrounds… BUT the transparent background has to be “antialiased” (smoothly transitioned in an art program like Photoshop) against whatever the background is that it will sit on top of, or you’ll see unattractive jaggies around the logo
  • Flat, solid colors look crisp and compress to a tiny file size without “artifacting” (showing chunks of color in the solid areas), which is why this is best for web use
  • Color type: RGB
  • Can support animation

4. JPG (JPEG)

(“Joint Photographic Expert Group”) – Use this for the web when your logo has gradations, or on miscellaneous applications that don’t support WMF/EMF or GIF. Characteristics of a JPG:

  • NOT scalable (bitmap format).
  • can’t support transparent backgrounds
  • RGB format (also supports CMYK but that’s not really relevant here)
  • Best format for photographs or things with lots of shades of color, but not ideal for flat, solid colors like your logo, because you will sometimes see “artifacting” (chunks of color)  in the solid areas.
  • “Lossy” format – meaning that the more you open it up and save it, the more quality it loses.

5. PNG

(“Portable Network Graphics”) – This is like the next-generation lovechild of GIF and JPG.
Characteristics of a PNG:

  • NOT scalable (UNLESS it’s a vector-format PNG which, confusingly, happens to be the native file format of Adobe Fireworks)
  • Supports transparent backgrounds and also semi-transparent colors like dropshadows
  • Color type: RGB
  • It supports more colors than a GIF, supports transparency, but its transparency isn’t supported by Internet Explorer 6 and earlier. So if you have an audience using old technology, that could be a problem.

I usually don’t deliver the png format because it’s not 100% supported on all browsers. However, that will likely change during 2009 as Explorer 6 gets phased out, and I’ll probably start shipping PNG files in place of GIF an JPG.

6. TIFF

You probably never need to use a TIFF for your logo when you have EPS at your disposal. This is intended for hi-res printing, but it’s not as good as EPS for logos because it isn’t vector. Characteristics of a TIFF:

  • NOT scalable (bitmap format)
  • Can support transparent backgrounds through alpha channels or clipping paths (added in Photoshop)
  • Color type: RGB or CMYK

You should never have a need for a TIFF file for your logo, so I don’t deliver this format to you.

I hope this summary helps you to know which format to use for which purposes. I’ll be explaining the color type differences in another post. Leave me a comment below if you have any questions!

{ 3 comments… read them below or add one }

Christina Rodriguez March 14, 2009 at 5:11 pm

Thanks for this little lesson, Amy! I prepare illustrations in these file formats all the time but don’t really think about why certain ones work best in certain situations. I’m just doing what the client tells me to! Your post opens up a whole lot more understanding for folks like me who just create without really thinking about it!

Amy March 14, 2009 at 5:36 pm

Hi Christina,
Glad my little explanation helped! I actually wrote up this explanation for one of my clients recently, and figured it would be a good thing to post. So I’m glad you found it useful.

Will February 23, 2010 at 5:26 pm

Thanks for the detail explanation I am a student at Art Institute of Pittsburgh and this really help me answer some of my study questions.

Leave a Comment

Previous post: Free template for web designers: Monitor Resolutions Guide

Next post: Understanding color for print and web