Filetypes 101 — Understanding and organizing your brand’s creative files
Published August 25, 2020
Throughout the article, we’ll refer to the example image as your logo, but these filetypes aren’t limited to logos! Logos are just the best example of an image that you will need to have in a variety of filetypes (compared to a social media image that only needs to be finalized in one filetype).
Here’s an overview of common filetypes and the recommended use case for each, sorted by what you’ll use most commonly.
.PNG files are web-friendly, meaning they work best when used anywhere online. The defining feature of PNGs is that they can be transparent. This is important to keep in mind if, for example, your logo is a shape or wordmark that will be displayed on a colored background, such as your website. Without transparency, the area behind your logo will be a solid white rectangle. Another feature is that PNGs are generally higher-quality than JPGs. However, this comes at the cost of having a larger filesize. As a rule of thumb, we recommend using PNG files everywhere online except for social media platforms (where you should switch to a JPG file).
.JPG or .JPEG
.JPEG or .JPG files are also web-friendly and are probably the most common filetype you’ll encounter online. JPGs have a wide range of compression quality, which means you can remove some of the detail of an image to get a smaller filesize. A smaller filesize means a quicker load time, which is why JPGs are so commonly used. Social media platforms have filesize limits, making JPGs the best choice for images.
SIDE NOTE ON GIFs
.GIF files are not something you need for branding, but they are common online. GIFs are another web-friendly filetype that can be used for short animations (although they can also be still images). You’ve probably seen GIFs on Facebook, Twitter, or even your text messages! Compared to regular videos, GIFs are short and last only a few seconds, which means the filesize is small. Your brand package likely won’t include your logo in a GIF format unless there’s a specific situation you’d need it for.
.PDF files are the most common print-friendly filetype you’ll encounter. This means that these are best used for printing, not for display online. (In fact, your PDF files may have a different color profile, which means the colors could display completely inaccurate if you try to display a PDF online!) If you’re getting business cards, t-shirts, or anything professionally printed, a PDF is what you’ll need to give to the designer or printer. PDFs are great because you can view them on any computer without special programs, unlike the next filetypes we’ll discuss. Another feature is that PDFs can include the source design (like an editable version of your logo) which is important for a designer. However, not all PDFs are built like that, so you’ll want to keep a version in one of the next few filetypes.
.EPS and .SVG
.EPS and .SVG files are both vector-based filetypes. In short, this means you can stretch them up to any size without losing any quality. If you have a small 4-inch logo in JPG format, stretching it to a billboard size will make it blurry and pixelated. These are used in pretty specific situations, but are still very important to have for any designers you work with. EPS and SVG files usually contain an editable version of the design, too. The main difference between the two is that EPS is best for print, while SVG is best used for web. However, you probably don’t need versions in each format because they’re so similar.
.AI and .PSD
.AI and .PSD files are both common types of source files. These will have the editable version of your logo or design, but need specific programs to be able to open them. AI files require Adobe Illustrator to open, whereas PSDs require Adobe Photoshop. Typically, a designer will most likely give you an EPS or SVG instead, which can function the same. You’re unlikely to see this filetype, but this is what your designer will use most commonly!
Now that you know the purpose of each file type, here’s a quick cheat sheet to compare their attributes! (Remember, more checkmarks isn’t necessarily “better” — it all depends on the situation you need an image for.)
|Web-friendly||Print-friendly||May be vector||Supports Transparency||Can be editable|