Whenever a graphic designer finishes up a branding project, as their client you’ll be receiving an array of file types. What I’m going to go over in this blog post is the type of files you should get your logos in and when and where to use them.
Have you ever wondered when you should use a JPG instead of a PNG? Or maybe you're just trying to figure out which program opens an INDD.
Unless you're a graphic designer by training (like me), chances are you've never needed to understand things like what separates a TIF from a PDF or a PSD. While the large variety of image formats may seem overwhelming, there is a method to the madness.
We've put together a useful outline to help you understand the difference between each file format, and when they are appropriate to use.
Vector vs. Raster
First things first: What is the difference between vector and raster?
Raster Image Files
Raster images are constructed by a series of pixels, or individual blocks, to form an image. JPEG, GIF, and PNG are all raster image extensions. Every photo you find online or in print is a raster image. Pixels have a defined proportion based on their resolution (high or low), and when the pixels are stretched to fill space they were not originally intended to fit, they become distorted, resulting in blurry or unclear images.
In order to retain pixel quality, you cannot resize raster images without compromising their resolution. As a result, it is important to remember to save raster files at the exact dimensions needed for the application.
Vector Image Files
Vector images are far more flexible. They are constructed using proportional formulas rather than pixels. EPS, AI and PDF are perfect for creating graphics that require frequent resizing. Your logo and brand graphics should have been created as a vector, and you should always have a master file on hand. The real beauty of vectors lies in their ability to be sized as small as a postage stamp, or large enough to fit on an 18-wheeler!
If you're not sure whether you have a vector version of your logo, here's a little trick for you: Call the company that printed your business cards or the vendor that embroidered your logo on a shirt. Often they'll have a vector file of your logo that they can send to you for your records.
High Resolution vs. Low Resolution
Have you heard your designer talk about DPI or PPI? DPI stands for "dots per inch" and PPI translates to "pixels per inch." These units of measure are essential for determining if the density of pixels in an image is appropriate for the application you are using.
The biggest thing to note when determining what DPI or PPI you require is if you are using an image for print or web. Websites display images at 72dpi, which is low resolution; however images at this resolution look really crisp on the web. This is not the case for print. Best practices for printing an image will require it to be no less than 300dpi.
Don't try to trick the system. A lot of magic can happen in Photoshop, but creating pixels out of thin air isn't one of them. Pulling an image off of the web and trying to get it to fit the dimensions of your print project just won't work. You will end up with a pixelated image that appears stretched and distorted.
Types of Image Files
JPEG (or JPG) - Joint Photographic Experts Group
PNG - Portable Network Graphics
GIF - Graphics Interchange Format
TIFF - Tagged Image File
PSD - Photoshop Document
PDF - Portable Document Format
EPS - Encapsulated Postscript
AI - Adobe Illustrator Document
INDD - Adobe Indesign Document
RAW - Raw Image Formats
1. JPEG (or JPG) - Joint Photographic Experts Group
JPEGs might be the most common file type you run across on the web, and more than likely the kind of image that is in your company's MS Word version of its letterhead. JPEGs are known for their "lossy" compression, meaning that the quality of the image decreases as the file size decreases.
You can use JPEGs for projects on the web, in Microsoft Office documents, or for projects that require printing at a high resolution. Paying attention to the resolution and file size with JPEGs is essential in order to produce a nice-looking project.
The first format I want to go over is JPG. This is a raster format which basically means it is defined by a certain amount of pixels. If you were to stretch out the size of the original image beyond its means, you will see what is called pixelation. To help define this, imagine mosaic tiles making up an image. The further away you are the more solid the visual is, versus the closer you are the more you can see each of those coloured squares separately. That is why it’s important that your raster images are delivered in the sizes that you need.
The popularity of the JPEG file stems from the fact that it is lightweight, while still being good enough quality for digital use. Due to its size, it will not only load faster, but it can be uploaded to any platform regardless of size limitations. This format can also be viewed on any device without the need to download a special image viewer. However, it’s important to be aware that every time you save a file as a JPEG, hence compressing it over and over again, it causes the image to lose quality and possibly become pixelated or grainy.
JPG vs JPEG
There is no difference between the .jpg and .jpeg filename extensions. Regardless of how you name your file, it is still the same format and will behave the same way.
The only reason that the two extensions exist for the same format is because .jpeg was shortened to .jpg to accommodate the three-character limit in early versions of Windows. While there is no such requirement today, .jpg remains the standard and default on many image software programs.
2. PNG - Portable Network Graphics
PNGs are amazing for interactive documents such as web pages but are not suitable for print. While PNGs are "lossless," meaning you can edit them and not lose quality, they are still low resolution.
The reason PNGs are used in most web projects is that you can save your image with more colors on a transparent background. This makes for a much sharper, web-quality image.
The second format I want to talk about is PNG. All of the above information is still valid when it comes to this format because it is also a raster file. The main and huge difference is that PNG’s can be transparent. This means that you can place them on top of other images files or on your website and there will be no background behind your logo. With JPG it will always have to have a solid background. PNGs are also automatically in RGB format.
Resolution:
There are three different resolutions raster images are commonly delivered in.
72 DPI which is most commonly used for web
150 DPI which is a happy medium between web and print
300 DPI which is the standard or print
These play a large factor in file size. For example you will not want to upload a bunch of 300 DPI images to your website because it will simply take longer to load and slow down your performance. You would want to use images that are 72 dpi and optimized for web.
3. GIF - Graphics Interchange Format
GIFs are most common in their animated form, which are all the rage on Tumblr pages and in banner ads. It seems like every day we see pop culture GIF references from Giphy in the comments of social media posts. In their more basic form, GIFs are formed from up to 256 colors in the RGB colorspace. Due to the limited number of colors, the file size is drastically reduced.
This is a common file type for web projects where an image needs to load very quickly, as opposed to one that needs to retain a higher level of quality.
You’ve probably heard of this file type based on its most popular feature that’s taken the Internet by storm: animation! The GIF file is a form of bitmap images, meaning the graphic is composed of many tiny parts called pixels, just like the JPEG and PNG file formats.
This file type is based on LZW (Lempel-Ziv-Welch), a special form of the lossless data compression algorithm. A GIF is most suitable for storing graphics with a few colours, such as simple diagrams, shapes, and logos, rather than gradients. For example, your business’ icons that contain three colours or less look great in this file format – plus, the small file size will be suitable to use anywhere. However, a beautiful sunset picture would not only be too heavy of a file size but also will look distorted because of the colour limitations. One benefit of this file type is that it supports a transparent background, like a PNG file.
4. TIFF - Tagged Image File
A TIF is a large raster file that doesn't lose quality. This file type is known for using "lossless compression," meaning the original image data is maintained regardless of how often you might copy, re-save, or compress the original file.
Despite TIFF images' ability to recover their quality after manipulation, you should avoid using this file type on the web. Since it can take forever to load, it'll severely impact website performance. TIFF files are also commonly used when saving photographs for print.
A TIF file contains an image saved in the Tagged Image File Format (TIFF), a high-quality graphics format. It is often used for storing images with many colours, typically digital photos, and includes support for layers and multiple pages.
It is capable of holding both lossy jpeg compression and lossless image data. It can also contain vector based graphics data. The format became popular among professionals in the publishing industry, including photographers and graphic artists.
The popularity of the format was partially due to its ability to be edited and re-saved without losing image quality.
SVG - Scalable Vector Graphics
SVG is a format commonly used to save and display vectors. Vector what? Vector art graphics are digital illustrations that are based on geometric shapes. They are created using a vector illustration software, like Illustrator.
Apart from the clean and professional look they embody, their biggest advantage is that they maintain the highest quality even when resized. For example, if your business logo is a vector – and it should be – you can resize it to fit something as big as a billboard sign or as small as your business cards without risking a loss in quality. Today, we can view SVG images on all web browsers.
It’s also a good format for printing purposes. So when you’re creating logos, icons and illustrations, make sure you save them as an SVG file. Also, if you’re working with designers on visual assets for your business, ask them to send it to you as an SVG file version, as well as other relevant formats (like PNG, JPEG, etc.).
5. PSD - Photoshop Document
PSDs are files that are created and saved in Adobe Photoshop, the most popular graphics editing software ever. This type of file contains "layers" that make modifying the image much easier to handle. This is also the program that generates the raster file types mentioned above.
The largest disadvantage to PSDs is that Photoshop works with raster images as opposed to vector images.
6. PDF - Portable Document Format
PDFs were invented by Adobe with the goal of capturing and reviewing rich information from any application, on any computer, with anyone, anywhere. I'd say they've been pretty successful so far.
If a designer saves your vector logo in PDF format, you can view it without any design editing software (as long as you have downloaded the free Acrobat Reader software), and they have the ability to use this file to make further manipulations. This is by far the best universal tool for sharing graphics.
7. EPS - Encapsulated Postscript
EPS is a file in vector format that has been designed to produce high-resolution graphics for print. Almost any kind of design software can create an EPS.
The EPS extension is more of a universal file type (much like the PDF) that can be used to open vector-based artwork in any design editor, not just the more common Adobe products. This safeguards file transfers to designers that are not yet utilizing Adobe products, but may be using Corel Draw or Quark.
Personally I would say this is one of the most important file types. If you are working with a professional designer you should be walking away with an EPS of your logo. If you’re not, then you’re just asking for a world of trouble in the future when you work with other designers or need to print your branding in large-scale formats.
An EPS is a vector format file. Unlike a raster, it can be scaled larger or smaller infinitely without losing any of its details. Pixilation or blurriness is impossible. It is essentially a graphics format for vector images that Adobe Illustrator uses, much like a photographic image file format is a JPEG.
An EPS cannot be used in the same way as your other formats. It can’t be uploaded onto your website, social media, or into Canva and similar web apps. If you are familiar with Adobe programs like Photoshop and Illustrator, then you can open EPS in those programs and get them to the exact size you need.
EPS is often the format preferred by high-end printers. Whether you’re working on packaging or printing a sign for your building, you will most likely be sending them an EPS. Giving them the freedom to resize, recolour and alter it into your specifics. P.S. please don’t let them actually change your logo design!
8. AI - Adobe Illustrator Document
AI is, by far, the image format most preferred by designers and the most reliable type of file format for using images in all types of projects from web to print, etc.
Adobe Illustrator is the industry standard for creating artwork from scratch and therefore more than likely the program in which your logo was originally rendered. Illustrator produces vector artwork, the easiest type of file to manipulate. It can also create all of the aforementioned file types. Pretty cool stuff! It is by far the best tool in any designer's arsenal.
9. INDD - Adobe InDesign Document
INDDs (InDesign Document) are files that are created and saved in Adobe InDesign. InDesign is commonly used to create larger publications, such as newspapers, magazines and eBooks.
Files from both Adobe Photoshop and Illustrator can be combined in InDesign to produce content rich designs that feature advanced typography, embedded graphics, page content, formatting information and other sophisticated layout-related options.
10. RAW - Raw Image Formats
A RAW image is the least-processed image type on this list -- it's often the first format a picture inherits when it's created. When you snap a photo with your camera, it's saved immediately in a raw file format. Only when you upload your media to a new device and edit it using image software is it saved using one of the image extensions explained above.
RAW images are valuable because they capture every element of a photo without processing and losing small visual details. Eventually, however, you'll want to package them into a raster or vector file type so they can be transferred and resized for various purposes.
As you can see from the icons above, there are multiple raw image files in which you can create images -- many of them native to certain cameras (and there are still dozens more formats not shown above). Here's a brief description of those four raw files above:
CR2: This image extension stands for Canon RAW 2, and was created by Canon for photos taken using its own digital cameras. They're actually based on the TIFF file type, making them inherently high in quality.
CRW: This image extension was also created by Canon, preceding the existence of the CR2.
NEF: This image extension stands for Nikon Electric Format, and is a RAW file type created by (you guessed it) Nikon Cameras. These image files actually allow for extensive editing without changing file types, provided the editing takes place using a Nikon device or Nikon Photoshop plugin.
PEF: This image extension stands for Pentax Electronic Format, a RAW image file type created by Pentax Digital Cameras.
Working with images is a lot more complicated than you'd think at first glance. Hopefully this guide has provided a better understanding of the standard file types and which are most appropriate for your project.
Does this article make you wonder which file types of your logo you have on hand? Take a look, and if you don't have an .EPS or .AI file stashed away, I would recommend contacting your designer.