JPEG, EPS, PNG, PDF, TIFF, GIF (how do you pronounce it?) and more - what do these mean?

If you’ve ever wondered why designers, printers, websites, etc. ask for certain file types, you’re not alone! In hopes of making you feel a bit more like an expert next time you order swag or get files from your designer, here’s an overview of different file types, what they are, and how they’re used.

Raster Files: JPEG, PNG, GIF, and More

Let’s start with raster files, which are images made up of pixels (those tiny lil’ squares that make up our screens). These file types include JPEG, PNG, TIFF, GIF and others. Their pixel count is set and can’t be increased from the original file type and maintain their quality. (Remember all those movies that say, "Zoom in, Enhance!" – it's not true in real life, unfortunately.)

So when you zoom in, eventually all you see are tiny little squares. And those squares don’t magically know how to adjust themselves or add more of themselves if you try to make your image larger. This is why resizing raster files too much can lead to a blurry mess.  So then why would anyone use a raster file??

Why Raster?

There are still benefits to using raster files, though! Here are a few:

• Realistic images: Raster files are the only way to capture photographs digitally. And you can get a LOT of details in these images, depending on your camera. 
• Editing: With raster files, you can also make realistic edits, adding shadows, blurring parts of the images, swapping out sections (like adding a blue sky), painting brush strokes and more, depending on what you need to do. 
• Compatibility: These file types are easiest to use across the web, social media, within print layout files, and more. GIFs can even be animated and added to websites, social media, and Google Docs!

Types of Raster Files

Here’s a list of some of the most common raster file types:

• JPEG: Great for images and photos, but always fills a rectangular shape. AKA you can’t have a transparent background in a JPEG. It will default to white if there’s any transparency. This file type works great for web because it packs lots of details with a lower file size.
• PNG: Here’s where transparency comes in handy! PNGs can be saved without a background, making them ideal for placing graphics on top of other designs. Transparent PNGs are usually larger file sizes because they store more data. 
• GIF: These are best for animations or simple graphics with few colors. Ever seen those dancing cat memes? Yep, those are usually GIFs.
• TIFF: TIFFs are larger files that store more data for use in printing larger photos. For example, if you’re printing a wedding photo or a large canvas, a TIFF file is a good one to make sure you don’t see any pixels once you print.
• WebP: This file type is becoming more popular, but still isn’t available everywhere. For some websites, you can save files as a WebP, which allows for a smaller file size (optimized for web speed) while staying really clear at the same time.
• Others: There are others, but we’re just covering the most common 🙂

Resolution & Pixel Density

Have you ever seen those little pixels, or your image looks blurry? This is where resolution and pixel density come in.:

• Pixels Per Inch (PPI): This tells you how many pixels a screen or an image contains within one inch. Most screens work at 72 ppi, but newer screens use 144 ppi for higher clarity. Think 4K TVs and screens or Apple’s retina displays.
• Dots Per Inch (DPI): Dots per inch refers to traditional printing, which prints a mixture of cyan, magenta, yellow, and black inks using tiny little dots that you can’t see with your naked eye. (FYI: If you’re trying to edit digital images, you can interchange DPI and PPI.) Printers typically print 300 dots of ink for every linear inch (just one line of ink, not a full square inch) on a print piece.
• Resolution: File resolution is how many pixels it has in its length and width. For example, a 1920px by 1080px is a standard screen size, and is 1920 pixels wide by 1080 pixels tall.
• Pixel Density: This is where PPI comes in. To know the density of pixels within an inch, you need to know the resolution (dimensions) of an image as well as how you’re going to display or print it. For example, if you want to print a 6” x 4” photo that isn’t blurry or pixelated, you need an image that’s 300 PPI times 6” wide (1,800 pixels) by 300 PPI times 4” tall (1,200 pixels) to print high-quality. 

So how do I size things?

Print

• When you’re printing things that will be close-up (flyers, business cards, rack cards, etc.), you need your resolution to be 300 dpi/ppi for images at their full print size (see pixel density above).
• If you’re printing larger items that people will view from farther away (large posters) your image density can be 150 ppi/dpi.
• For even larger things, like billboards, you can print at 72 dpi (since they’re so far away, you won’t see those pixels).

Digital

• Social Media: These apps usually want an image to be at least 1080 pixels wide (height can fluctuate depending on if you have a square image or a tall or wide rectangle).
• Websites: Websites should always use images prepared for a 4K/retina screen so that they show up clean for everyone, which are double the pixel density of regular old screens.. So, if an image is 300 pixels wide on your screen, ideally, you’ll export it at 2x size so it’s 600 pixels wide.

‍

Vector Files: AI, EPS, SVG, and PDF

If you’ve seen this movie, you know this guy, Vector, explains his name (and the definition of a vector) as a quantity that has both a direction (up, left, right, down) and a magnitude (how far it goes). OK, that’s enough #math.

Because vectors are made up of mathematical formulas, you can zoom in infinitely and never lose resolution, like this:

Why Vector?

Vector files are great for logos, clean-line illustrations, and icons. Some benefits of vector files are:

• Clean lines: Vector graphics will give you clean, crisp lines and are infinitely resizable. 
• Editing: With vector files, you can very easily edit colors, move shapes, and keep backgrounds transparent. 
• Small file size: These file types are usually nice and small, so they’re great to upload to a website, use in design files, and send to printers.

Types of Raster Files

• AI: This stands for Adobe Illustrator, so .ai files are native Adobe Illustrator files and will only open in that program.
• EPS: This stands for Encapsulated Postscript, and it’s an exported version of an Adobe Illustrator file. This can be opened by more apps, such as Adobe Acrobat, Corel Draw, Inkscape, GIMP, and more. EPS is a great file type to send to a graphics printer for shirts, mugs, or other screen printed swag, as well as for embroidered swag.
• SVG: This stands for Scalable Vector Graphics and is usable in the design files above, as well as in web browsers and on some website builders such as Webflow, Squarespace, Wix, and WordPress. You can also upload an SVG file to Canva as an element, and you can edit the colors.
• PDF: This stands for Portable Document Format and is one of the most widely-used file formats on the web. PDFs aren’t always vectors (they can be raster images or a mix of both, as well as text that you can copy/paste).

Color Spaces

And just a quick note on color spaces: screens and inks use different color types!

• Screens use pixels, which are red, green, and blue, or the RGB color space. These pixels mix together to create all the colors you see on a screen.
• Printers use 4 ink colors to create all the colors you see: cyan, magenta, yellow, and black (CMYK).

If you ever upload a logo or an image that looks really saturated and wrong on a screen, chances are it’s a CMYK color space file. Or if you send an RGB file to a printer, they may have some issues getting the colors right. 

Now that you’re an expert in file types, go forth and create and share your files accurately!

‍