File Types Demystified
Even as a graphic designer, the alphabet soup that is file type extensions can be confusing. It's not always clear why you need a high-res TIFF or EPS file for printing purposes while a JPEG will work on a website.
In an effort to clear up the confusion, I've created this infographic that explains, as simply as possible, what each of the most common design file types is and what their best uses are. I've also included when you should NOT use each one.
There are more details in the body of the post, but this image covers some basic information that should help most business owners navigate the various file types they might come across.
RASTER VS. VECTOR
First of all, it's a good idea to understand what the difference is between raster images and vector images.
RASTER IMAGES are made up of pixels. Pixels are like dots or points that are laid out on a grid to create a flat image. It's kind of like nineteenth century Pointillism, only the points are exactly the same size and shape.
The more pixels, the more detail. The problem is that when you zoom in or blow up the image, the quality eventually degrades, and the image becomes "pixelated."
Digital photographs and scanned images are raster images.
VECTOR IMAGES are made up of paths that are defined by points, curves and angles. Lines, squares, triangles and curvy shapes are all paths. Paths can be used to make simple shapes or very complex drawings and diagrams.
Vector graphics are infinitely scalable; if you zoom in on them or blow them up, they won't lose quality. This is why logos should always be vector graphics.
To create vector images, you need vector illustration software like Adobe Illustrator, Freehand or CorelDraw.
FILE TYPES FOR WEB USE
JPG / JOINT PHOTOGRAPHIC EXPERT GROUP
JPGs are one of the most widely used file types today.
When you take an original, PSD (Photoshop's native file format) file that's been created by a professional photographer, for example, and save it as a JPG, any unnecessary data from the original file is removed. This is called "lossy compression," and reduces the file size significantly
The problem is that you can't get that information back without going back to the original file.
Because of the small file size of JPGs, they are best used for web design. They allow web pages to load more quickly than some other file formats. They're also used quite a bit in digital photography because they allow more photos to be stored in a phone, on a memory stick, or on a hard drive.
On the other hand, JPGs should not be used for printing. Even a high-resolution JPG contains less information than a TIFF. You can get a high-quality print from a high-resolution JPG, but because JPGs are so widely used on the web, more often than not, they've been saved down already. And once a JPEG has been made smaller, you can't make it large again.
PNG / PORTABLE NETWORK GRAPHICS
PNGs are becoming more popular and are often substituted for GIFs, and some JPGs, for web use.
They can produce higher quality images than JPGs, but you trade small file size for that quality. They also support transparencies, which is great for placing logos and icons on top of colored backgrounds. If you try that with a JPEG, you'll have a visible white box around your artwork, which never looks good!
They are best used when you need a higher quality image, or one with a transparent background, than you can get with a JPG or GIF in a web design. They should be used sparingly though because they'll slow down a website's load time.
Like JPGs, PNGs use lossy compression, so they'll lose quality if you size them down.
GIF / GRAPHIC IMAGE FILE FORMAT
Most designers pronounce GIF with a hard G at the beginning, but apparently, its inventor says it's supposed to be pronounced like "Jif." Who knew?
GIFs were the original web graphic file format (you know, way back in 1993). They work best for images with flat, solid colors, and they can be animated, which is probably the biggest plus for them.
GIFs also support transparencies while maintaining a low file size; unless you're file includes a lot of different colors, that is. The more colors in the image, the larger the files size, which means that GIFs suck for photography.
GIFs are never a good choice for non-web use.
SVG / SCALABLE VECTOR GRAPHICS
The SVG file format was approved by the World Wide Web Consortium in 1999 as a way to use scalable images on the web. They are ideal for websites that are viewed on today's retina devices, and devices with varying screen dimensions, because they can scale to any size without losing clarity.
They can be animated and and can be printed at any resolution. Another bonus is that if there is text in an SVG image, it can be indexed, and the text in the file will be picked up by search engines.
Because of their scalability and relatively small file size, they are becoming more and more popular. They also work on all modern browsers now, although there is no support in Internet Explorer 8 or lower.
The file size quickly becomes large with complex images though, so they are best for more simple logos, icons, and illustrations on websites.
FILE TYPES FOR PRINTING
TIFF / TAGGED IMAGE FILE FORMAT
TIFFs are the preferred file format for photos used in files that are being printed. They support both layers and transparencies, which makes them ideal for graphic artists.
They're the most reliable format for raster data that is available to the general user. They can hold a ton of raster information, but they can't hold vector data.
Because they hold so much information, the TIFF file format is quite big, making them inappropriate for web use.
Lastly, TIFF is a lossless file format, so nothing is lost when the file is saved and compressed.
EPS / ENCAPSULATED POST SCRIPT
EPS files can contain both vector and raster images, so they aren't pure vector graphics. With that said, they are used almost exclusively for vector graphics and are still widely used as master files for logos.
EPS files can be reopened and edited and scaled to any size without losing clarity of the graphic.
They are compatible with many programs and are the file of choice for sending vector graphics to print. They are generally meant to be placed within another program file (like InDesign files), but I've had many printers request EPS files directly for large-scale signage.
Some will argue that the EPS file format is becoming obsolete, but the universality of the EPS file format makes it a widely used file format still.
AI / ADOBE ILLUSTRATOR
If you're wondering what might replace EPS files, it would probably be the AI file format. AI files are also vector based, but they are proprietary to Adobe Illustrator, which means you can only create and edit them with that program.
Like EPS files, AI files are best used for logos, illustrations, and print designs.
One thing I like about them over EPS files, is that I can double click an AI file, and it will open directly in Illustrator. If I do this with an EPS file, it will open in Preview, which pretty much drives me nuts!
PDF / PORTABLE DOCUMENT FORMAT
Another very common file format is the PDF. More often than not, if I'm printing a form, brochure, annual report, book, poster or just about any other document, I will make and send a PDF to the printer.
One of the reasons they are so popular for documents that are printing is because, when output from Illustrator or InDesign, they offer a great deal of control over compression, size, printer settings, etc.
They work particularly well for sending clients drafts because you can output them at small sizes, making them easy to send via email. Later, when the file is approved and ready to go to print, you can easily make the high-resolution file you'll send to print.
While not really a “graphic file format,” PDFs can be used to contain one or more images. I often use them to show logo options to clients.
They are designed, however, to capture entire pages with laid out content like photos, vector illustrations, logos, typography, etc.
Ideally, a PDF shows how a document will appear when printed on a PostScript printer, but you have to take care here. Sometimes, PDFs look perfect on screen but not when printed. Whether or not a PDF prints well at high resolution, like on a professional press, depends on how the file was created.
One plus with PDFs is that you can make minor text edits in Adobe Acrobat Pro, which is a much less expensive, and more universal, program than Adobe's design programs.
This is a partial list.
But, it should give you a sense of the various common file types you'll come across when working with a designer and which file types you'll need for what uses.
I hope this post has been helpful!
As always, I'd love to know your thoughts in the comments below.
