Everything is complete, and all you need now is the final files. You are, however, at a loss at this point. You’re not sure what to ask for and make sure you get. You know a bit about a JPG, but what are all of those other file types they keep rambling about? What do you need? Where are they used?
Here is a complete breakdown of the differences between file types, benefits and uses.
They’re broken into two main categories—vector and pixel files.
Vector Files—Your High-Quality Print Files
Vector files are an absolute must.
If you’re working with a designer who won’t provide these, you should run for the hills. Only work with designers who provide a vector version, especially for branding materials. Vector files are the number one choice of print shops, and are a mission critical raw file format.
A vector file is file made up of lines. Those lines never get pixelated and are able to be scaled to any size no matter how big or small.
Adobe Illustrator (AI)
Adobe Illustrator is the most popular and prevalent design vector-design software out there.
The .ai file type is the rawest of raw. It’s the file containing the original lines in a controllable and modifiable format in various layers. From this center point, all of the other file types are exported.
- Exporting to high-quality file types
This is the file format most often requested by print shops. The PDF reigns king as a vector file format.
- Note: the PDF has to be saved from a vector program to be a true vector PDF. If you save a PDF from Photoshop (and they aren’t vector shapes), it will still get pixelated when it hits the print shop.
- Marketing materials
- High-quality document printing
The EPS was the PDFs predecessor. Nowadays, this format is dying off and is mostly reserved for old vector graphics using the format.
You’re able to export EPSs from Adobe Illustrator, but I don’t recommend using it as a viable file type unless you hear differently from a printer.
- Back ups (lean into PDF as your first choice) for printers who may ask for it by chance. Better to have everything you need at once from a designer than in hindsight:
- Marketing materials
- High-quality document printing
SVGs are amazing file types for website design.
You should use SVG for your graphic/iconic elements on your website. Being a vector format, these will scale infinitely without pixelation, which comes in handy for cross-device quality control. And also, they’re extremely lightweight in file size, which will make them load faster. I’m talking the low kilobyte range.
You can also leverage SVGs for advanced functionality. Experienced website designers can leverage them to create incredible works.
- Here’s an example of a map on a travel website. Each country is its own individual graphic with its own ID to trigger unique pop-up boxes. Also, CSS effects are able to be added to each one (note the hovers).
- Website graphic or iconic elements
- Advanced graphics modified by CSS in website design
You most likely won’t utilize this file type unless you’re working with websites. For printing purposes, stick with PDF.
Pixel Files—for Websites and Platforms
You’ll utilize these file types most prominently on websites and platforms (social media, profiles, etc.)
Of all the pixel file types, JPGs carry the smallest file sizes.
When it comes to website design, file size matters. Anything over 800kb is too big to be placed on a website page and will slow down page load. Slow page load equals less search-engine optimization (SEO) power, as well as a higher bounce rate (people getting impatient and leaving).
The image bannering this blog post is a light-weight JPG. A JPG is easily able to losslessly compress large files with a high-quality output. This means the file size is small and lean, but the final product is gorgeous.
Other website graphics (logos, designed items) are up in the air. If you export the graphic with the highest-quality possible, you’ll most likely be OK. Just make sure the file size isn’t to big.
- Note: JPGs don’t support transparent backgrounds. Some graphics might require this capability which is best served by PNGs.
- Also, if using these, make sure the file size is correct and the resolution is at least 300 dpi.
- Photo files
- Photo-related assets on a website (like this blog post’s banner/hero image)
- Some graphics
- Never ever send a JPG file to be printed for any marketing material (business cards, brochures, etc.)
- Never ever rely on JPGs as your “raw” file standard. Every single time a JPG is saved, it loses quality and compresses itself. Somewhere down the road, you might end up with an incredibly pixelated file and there’s no way back.
Portable Network Graphics (PNGs) are high-quality file formats. The biggest advantage that they offer for online usage is their transparent backgrounds.
This makes them ideal for usage on websites where a transparent background is required (as long as they aren’t too large).
Another key advantage of the PNG is that it’s a lossless quality file. This means that it won’t get grainy or blurred when uploaded or utilized (like pixelated file types).
- Note: to properly export a PNG, make sure the file dimensions are large enough and that the resolution is set to at least 300 dpi.
- Website graphics requiring a transparent background
- Use this file type for social media profile graphics (because they won’t lose their quality upon upload like JPGs so often do)
GIFs are similar to PNGs. They support transparent backgrounds and don’t lose their quality.
The main difference is that GIFs support basic animations. You’ve seen a lot of these floating around. Here are a few just for fun:
- Animated images/graphics
TIFFs are kind of similar to JPGs. The difference is that they never get compressed out of the box and so they can often be much, much larger than their JPG counterparts.
You have the option to losslessly compress them down the road, but again, no compression elements are introduced without your consent.
Another differentiator between TIFF and JPG is the depth of the file itself. TIFFs are able to achieve a much deeper bit-channels.
- You most likely won’t ever use this. It’s not standard to request these as a file type for design projects.
The Bottom Line—Here’s What You Need and Don’t Need
|File Type||File Name||Usage||Do You Need It?|
|Vector||Adobe Illustrator (.ai)||Raw, source file to export every file from.||Absolutely yes. This is non-negotiable for brand materials.|
|Vector||PDF (.pdf)||Printing, logos.||Yes.|
|Vector||EPS (.eps)||Printing for certain print shops, context.||Yes. You might not need it, but get it to be safe.|
|Vector||SVG (.svg)||Website design.||Yes. Any icons, logos, graphics on your website should be SVG.|
|Pixel||PhotoShop Document (.psd)||Photo editing and manipulation primarily. Some very basic design||No. Never accept a source design file in .psd format for brand materials.|
|Pixel||JPG||High-quality, small-file-size photos/some graphics.||Probably not. Never use this for printing or a source file.|
|Pixel||PNG||Graphics that need transparent backgrounds. I recommend using these for social media profile photos, banners because they never get compressed.||Yes.|
|Pixel||GIF||Animated graphics (think of a Meme)||No.|
|Pixel||TIFF||High-depth images without any loss of quality.||No.|
In special cases you might require more or different file types. In these special cases, your designer should communicate what those are, what they are and how they should be utilized.