File Guide- JPG, PNG, EPS, PDF, PSD, AI, GIF, TIFF
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. Uses: Designing Exporting to high-quality file types
GIF
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. Uses: Animated images/graphics
What are the Nevers of JPG?
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.
PNG
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. Uses: Website graphics requiring a transparent background Pro Tip: Use this file type for social media profile graphics (because they won't lose their quality upon upload like JPGs so often do)
SVG
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. CSS effects are able to be added to each one (note the hovers). Recommend Uses: 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.
TIFF
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. Uses: You most likely won't ever use this. It's not standard to request these as a file type for design projects.
EPS
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. Uses: 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: Logos Marketing materials High-quality document printing
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. Uses: Logos Marketing materials High-quality document printing
JPG
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. Uses: Photo files Photo-related assets on a website (like this blog post's banner/hero image) Some graphics