Do you ever see an image with a strange file type at the end that you don’t recognize? There are SO many different image file types and they all have very specific purposes and uses. Whether you’re using a photo for web or for print, blowing it up for a poster or shrinking it down for a business card, it’s important to use the correct file type for the job. Using the wrong file type can lead to distorted colors and blurry pictures, and you definitely don’t want that! Here is an overview of all each different image file type and what their purposes are.
Click here to read about the Adobe Creative Suite, so you can fully utilize each image file type.
Alright, everyone is familiar with this one because JPEGs are the most common image file type. Use a JPEG image to compress images to be a smaller file size. Compressing the file size will reduce the quality somewhat, but sometimes size is more important than quality. This would be useful when sending a proof or adding the image to a Power Point presentation. When the image is compressed, the quality that is lost is primarily the color. The compressor decides which colors are common, and colors that are “uncommon” are not included in the file, thus losing resolution and color quality.
JPEGs are a final file, meaning you should not continue to edit the image. If you edit a JPEG, you will lose quality with each edit you make. For the highest-quality image possible, try to edit the image as a TIF or PNG file if possible.
If you need a smaller file size without losing quality, a PNG is for you! This file type can be used on the web and for print, so it’s versatile in addition to being high quality. When a PNG file is compressed, which may take longer than a JPEG, it does not lose color and quality the way a JPEG does. It is slower to read as well, meaning longer load times, but you maintain the quality in the image. You can also edit PNGs without losing quality, though it’s still a good idea to keep the editing to a minimum.
Another important aspect of PNGs is the ability to save with a transparent background. How many times have you found the perfect image or logo, only to drop it into your file and see a white box around it? If you create an image with no background color in programs like Photoshop and Canva, be sure to save it as a PNG to make sure there’s no white box around it. Click here to read my full tutorial on saving an image with a transparent background.
Whether you pronounce GIF with a hard or soft G, this file type is familiar to many of us. What stands out about GIFs is that they can show movement. We love to use these in reactions to show our emotions by grabbing a GIF of our favorite TV show or movie. But, not all GIFs are animated – static images can be GIFs, too!
GIFs are ideal for the web because they’re the smallest image file size, which means super fast load times. They use limited colors, so it’s better to use GIFs for illustrations and web graphics with few colors than for photos that should be high quality. Because of the limited colors, it allows the file size to be small.
A lesser-known image file type to those not in the design world is a TIF file. TIF image files are what is called “lossless” – meaning, you can edit to your heart’s content and never lose quality! Even if you compress the image to a smaller file size, the quality remains the same. This is incredibly important to designers so that you can edit the image and ensure high quality. TIF files are the highest quality image file you can have since there’s no way to diminish the quality.
The downside to TIFs, versatile though they are, is that they’re not web-friendly. You can only load a TIF in programs meant to handle them (such as Photoshop). If you need to use the image on the web, save it as a JPEG, PNG or GIF file.
Another image file type that’s more familiar for designers is an EPS file. This is a standard vector file. A vector is made up of code and formulas which allows the image to be stretched to any size without compromising quality. EPS files are best for images, especially logos, that need to be resized, particularly if it’s being used for print. If you need to use an EPS file for the web, you’ll need to save it as a JPEG, PNG or GIF file first. To edit and view an EPS file, you’ll need a program that supports this.
If you’re not a designer, you will likely never cross paths with an EPS file. This file type is usually for backend use only by the designer and the printer. It’s not a web-ready file type, and in order to even view the image you need a program, like Adobe Illustrator, that supports EPS files.
PSD files are another file type that you won’t be working with unless you’re a designer or have Adobe Photoshop. This file type is specifically for Photoshop, and not for web use. The only way to safely edit a PSD file is in Photoshop, so this image file type is not very common to consumers. The benefit of editing PSD files, is that each layer and edit that’s made is saved so that you can rearrange and edit later on without it compressing into a flat image. Each Adobe program has its own file type: Illustrator (AI) and InDesign (INDD) are two other common file types.
Yes, you can save images as PDFs – it’s not just for documents! PDF images are print and web ready. This downloadable file type is great for sharing previews with clients, since it’s high quality but not editable. Since you can’t edit a PDF file, if you do so you will lose quality, it’s best to be used purely for downloading purposes. If you have an image, document or other file you need to upload to the web for others to download, a PDF is the best way to do it.
What’s the best way to edit each image file type?
The Adobe Creative Suite includes all the programs you’ll need to work with these file types. Click here to learn more about the Adobe programs. Are you not sure if it’s the right time to invest in programs like Photoshop and Illustrator? Read my post on this topic to help you determine what’s right for your business. Other programs, like Canva, are great to use JPEGs, PNGs and GIFs in for all your web and print needs.