Have you ever worked on a project where you needed a specific type of image and didn’t know which to choose? There are JPGs, PNGs, GIFs, and more and we know it can be overwhelming — especially if you’re unfamiliar with the varying types of file extensions.
Whether you’re a designer looking to remind yourself of the differences or a business owner trying to decipher all the different file types a designer sent your way, this list is sure to help. For example, if you recently created or recreated a logo design and want to start up loading that file to your website, social media, blog, business cards, and more, it is extremely important that you understand the types of files you need and when and how to use them.
Some are specifically used for printing, others for digital use only, and some can be used interchangeably. When it comes to file formats, it’s first important to know the difference between a vector and a raster file. Raster images — JPGs, GIFs, and PNGs — are every type of photo you find online or in print. According to an article by HubSpot, Raster images use pixels to give a “defined proportion based on their resolution (high or low), and when the pixels are stretched to fill space they [weren’t] originally designed for, they become distorted.” Whereas vector images — EPS, AIs, and PDFs — are suited for creating graphics as they are able to frequently resized larger or smaller, as needed, without becoming distorted.
Pro Tip: When working with a designer or ad agency, you should always receive all or most of these types of files. Especially the vector files, as they will come in handy when using the files in the future.
Check out the list of the types of file extensions below to learn when and how to use each one.
1. JPG
The JPG (also known as JPEG) stands for “Joint Photographic Experts Group,” and is the standard for photographs and images that are compressed to hold a large amount of information. JPGs are files of larger images that have been compressed to a smaller size. Typically, this is the file extension that most cameras use to store photos and are the types of images used on the web.
Due to its compressed state, a JPG is described to have “lossy” compression. Meaning, that a JPG file will lose some of the image detail during compression in order to make the file small. The compressed JPG files are poor for printing but are ideal for using on the web due to their ease of upload.
While you can save a high-quality JPG for some printing, we highly recommend that you use other high-quality file formats (like PDFs) when printing.
2. TIFF
The TIFF file, or Tagged Image File Format, create extremely large files. Unlike the JPGs, TIFFs are uncompressed and thus contain a large amount of detailed data. As such, they can be saved in all colors including greyscale, CMYK for print, or RGB for web).
These types of files are commonly used in photo editing software like Adobe Photoshop and page layout software such as Quark or Adobe InDesign. Due to their larger size, it is best not to use TIFFs on the web as they will slow down the speed of your web page — which is frowned upon by Google.
3. PNG
Files ending in .PNG (or Portable Network Graphics), are used exclusively on the web, never for printing. PNGs are slightly larger than JPGs, so they’re not always ideal for larger images. However, with PNGs you can save images with transparent backgrounds, which can be extremely useful for design and marketing projects.
Since PNGs are considered “lossless,” you can edit them without sacrificing quality – but remember they are still low resolution and not used for printing.
4. GIF
Graphic Interchange Format files (a.k.a. GIFs), compress images like JPGs but are different for a few reasons. Primarily, GIFs can be saved as animated images. Secondly, GIFs can be compressed but will still save at a larger size than JPGs. Additionally, GIFs have a limited color range, which make them suitable for web use only.
5. PDF
PDFs, or Portable Document Format files, can be used for web and print interchangeably. According to HubSpot, PDFs were designed by Adobe so users capture and review documents and graphics on any device, application, operating system, or web browser.
This type of file extension has a powerful vector graphics foundation, but can display both vector and raster graphics, along with forms, spreadsheets, and more. Having PDF versions of your file is important as this is the high-quality file format most printing companies require from businesses.
Whether you want to send someone a digital form to fill out line, or send them a printable booklet, PDFs can display them all without sacrificing resolution/quality.
6. EPS
EPS stands for Encapsulated PostScript. Primarily used for re-scalable vector images, an EPS file can hold both vector and raster image data. You should always use EPS (and SVG, which we discuss below) when designing a logo or clothing design, because no matter the size, it will always display at the correct resolution.
Although EPS files can include raster data, this type of file format is not used with photographs or artwork and isn’t used to display images on the web.
7. SVG
We could essentially combine the definition and uses of SVG files with the aforementioned EPS files. They both retain image quality no matter how large or small you display the image. SVGs, or Scalable Vector Graphics, are idea for responsive web design, along with the same uses of EPS files.
8 – 10. AI, PSD, and INDD
We grouped the AI, PS, and INDD file formats together, as they are all the original Adobe file formats of a photograph or graphic. AIs are Adobe Illustrator files that generate vector-based images. Designs created in Illustrator can’t be edited using non-Adobe programs.
PSD, or Adobe Photoshop files, contain images that are raster-based. Photoshop uses layers to generate photos or graphics. A helpful way to understand how these original design files work is that they are the uncompressed (or separately layered and editable) versions of JPGs.
Finally, we have INDD files. Adobe InDesign files are primarily used for desktop publishing projects. INDD files can only be opened and edited in Adobe InDesign, so they are typically saved to PDFs when sharing or sending to printers.
Recap
The best advice to remember when dealing with file extensions is to remember that not all file extensions are equal. They each have their own purpose for good reasons.
As a business owner, you don’t want any part of your website or marketing material to look blurry, pixelated, or unprofessional. Knowing the above information is crucial when you upload and use your logo and other images throughout your business’ materials.
