Team : Work

Tips & Tricks

Logo file types explained

January 20, 2023
When we provide logo files to our branding clients, we export the logos into two file formats: PNG and EPS. If you’re not a graphic or web designer, you might be wondering when to use the different file types and which logo file to send to someone who needs a logo. In this article in our branding series, we explain the two types. We’ll also touch on other file types you might encounter (if you haven’t done your branding through ESD 112).

PNG vs. EPS file types

Each of the logos we provide to our clients are available in two file types: EPS (vector) and PNG (raster). Both types can have transparent backgrounds and are widely used. For those unfamiliar with these graphic formats, here is a quick guide for when to use each:

EPS (vector)

  • ZSending to a professional printer
  • ZScaling very large
  • ZUsing in an Adobe design program

PNG (raster)

  • ZUsing within Microsoft Office or Google programs
  • ZPlacing on a website or social media
  • ZPlacing in an email signature

What’s do “raster” and “vector” mean?

It’s important to know this terminology because you might have a printer or designer ask you for a “vector logo”. Vector means that the design has been drawn in the computer using mathematical curves, using a program like Adobe Illustrator. Because the file uses programming, rather than pixels, it can be scaled to any size without losing quality. Examples of vector file types include EPS, AI, and the newer SVG.

By contrast, a raster file is an image composed of pixels, like a photograph. You’re probably familiar with these image formats, such as PNG, JPG and GIF. Images made of pixels (raster images) cannot be enlarged without losing quality.

Here’s an example of what the Toutle Lake logo that Heidi recently designed (right) looks like enlarged 500% in both vector and raster formats*:

PNG (raster) image scaled up 500%EPS (vector) image scaled up 500%

*Of course, since this is a website, the “vector” image isn’t actually vector, it’s a raster screenshot of the vector image. The curves are not perfectly smooth here, but you get the idea.

As you can see from this example, if you are enlarging a logo for a banner, sign, or even a poster, you do not want to be using a raster logo.

After learning about logo files, you might be realizing that you don’t have a vector version of your logo or a logo with a transparent background. This is common for those with old logos, those using logos drawn by students or others, or those who have purchased a logo from inexpensive, online design services. If this is the case, feel free to reach out for a quote on a vector logo tracing with our services form. We’re happy to help!

Here’s an example of a legacy logo cherished by Eisenhower High School in Yakima that we restored, recolored, and vectorized for them:

Pixelated legacy raster logoVectorized, cleaned up, and recolored

Why not only use vector files?

If vector files can be enlarged without losing quality, why do we need raster files? Well, unfortunately, vector files are not yet usable in software such as Microsoft Office programs or Google Suite. These programs only use pixel-based images.

Raster files are also the most common for web use. While SVG is a new web-based vector image type, we’ve found that only certain web hosts will accept them (and many hosts that schools use do not yet). In the next few years, SVG will probably be more widely used across all web hosting platforms.

If your organization uses WordPress as its platform, you might try SVG and see how smooth graphics look with it. Our WordPress guru, Laura, used SVG as the filetype for the fine line graphics in the background of the website for the Washington DeafBlind Program with fantastic results. To get lines that smooth for a background with a raster file would have made for huge, slow-loading image files.

What about the other image file types?

You might be asking yourself why we choose PNG over JPG for a raster file. Afterall, JPG image files tend to be smaller in size. While we recommend JPG images for displaying photos on the web, PNG is the way to go for logos or images with crisp lines and lettering. Not only are PNG images able to have transparent backgrounds, they also display smoother lines than JPG images.

Now that you are armed with probably more than you ever wanted to know about logo filetypes, you can go forth to use and share your logos with confidence! In the next article in this branding implementation series, we’ll reveal the secrets of color codes and how to use them.

About the TEAM Member

Melissa Burt

Melissa Burt

After spending the first chunk of my design career in marketing and the private sector, I was happy to use my skills for good when I joined the ESD in 2015. My role on our communications team tends to be complex problem solving and distillation. Nothing makes me happier than taking a massive amount of boring, complicated, jargon-filled text and numbers and transforming them into something beautiful, informative and easy to digest.