What The File?!: Navigating the difference between image file types

Somewhere in the lines of communication with your graphics department, you’ve probably seen or heard the terms ‘vector’ and ‘raster.’ What you probably don’t know is that you use those file types every day. Each image file you see fits into one of those categories.

What are vector and raster files?

Raster images are made up of pixels, which are basically tiny squares of color. The images are typically categorized as high resolution (~300 pixels per inch) or low resolution (~72 pixels per inch) and have a set proportion based on its size. When raster images are scaled larger or smaller than their intended size, they lose quality and become fuzzy. But when used at their proper size, raster images provide great detail and can allow for precise editing – great for photos. Raster files are best-suited in digital applications like websites and emails because of their relative small file size. The most common types of raster files are JPGs, GIFs and PNGs.

koroberi-cat-graphic-design

Vectors, on the other hand, are made up of line art and proportional formulas. They know no limits when it comes to scaling or resolution. Vector files have the ability to be scaled small enough to fit on an ink pen, or large enough to fill a billboard without compromising its clarity. For this reason, vectors are the preferred file types for logos and brand elements, and are great for printed applications. But because of the image build, vectors don’t always handle finer details like shadows, color fades, etc., as precisely as a raster file would. The most common types of vectors are AI, EPS and PDF.

Ok, why do we need JPGs, GIFs and PNGs? Aren’t they all raster file types?

Each kind of raster file type serves a different purpose.

 JPG is probably one of the most commonly known file types. These file types are best used for images with a vast number of colors and detail, and are typically large in file size.

PNGs support transparency and keep the overall file size down (i.e. a website’s dream). In the example below, the cupcake on the left is a PNG with a transparent background – creating a clean, intentional placement on top of the pink polka dot background. On the right, the same cupcake in a different file type (most likely a JPG) is placed without transparency. See the difference?

GIFs have recently taken over social media – but did you know that they aren’t actually videos? They’re a set of images that flip through quickly, giving it a video-like quality. This unique ability makes GIF files excellent for simple animation. GIFs support transparency, but unlike PNGs, GIFs only support 256 different colors in the RGB color space. hFor this reason, GIF files are low-resolution and load quickly on a webpage.

Now let’s talk AIs, EPSs and PDFs (vector files)

AI files are the working, editable files from Adobe Illustrator. They are ideal for logos and any other artwork that requires frequent resizing.

EPS files are the universal high resolution vector file type that can be used across a range of graphics software, not just with the Adobe Creative Suite. EPS files are great when printing vector graphics.

PDFs are probably the most common and most useful file type, created to work for everyone. For example, a designer can create an illustration in Adobe InDesign or an image in Photoshop and save it as a PDF to send to a client. The client can open and view the document without having any design software, while the designer still maintains the ability to edit the artwork.

File this to memory

While knowing each attribute of every file type can be a doozy, having a general understanding of their abilities and applications is vital to articulating your needs to your design team. Greater, more effective communication between you and designer will make everyone happy, especially when you finally understand why your designer just sent you 100 different files of the same thing.