Why have image files become so confusing these days? There are so many options: JPGs, TIFFs, GIFs, PNGs, etc. Most people feel that if they don’t have an extensive background in design it’s just too difficult to understand the difference. Surely there’s not that much of a difference, right?
Well actually, there is. But learning about formatting doesn’t have to be difficult, or take years of experience. Having a basic knowledge of image formatting is all you need to make your images look their best. However, if you don’t take the time to learn the difference between file formats and select the wrong one, you will end up with a poor quality result to work with. And if you are trying to send that poorly formatted image to a design firm to use, you will probably hear back from them shortly about needing a “better quality, higher-resolution file.” I have to admit, every time I receive a logo from a client that is in JPG format when it should be in PNG format, my heart drops a little bit. I understand that most people are simply uninformed on the subject, but I can’t help but have frustrations when choosing the right file type for images is so essential to producing the best quality possible—which is what we are all shooting for.
Each image format has pros and cons that can affect color display, file size and compatibility. But don’t worry—I will try and explain each format so next time you run across this issue you can sound like a formatting-whiz who spent years buried in a design book without anyone being the wiser. Here, I will be breaking down the basics of JPGs, GIFs, PNGs and TIFFs. I’m saving some other file types, like EPS and vectors, for another discussion—so stayed tuned.
JPG
JPG is the most common image format and when compressed it generally produces the smallest file size with little to no noticeable quality lost. A JPG is ideal for photos that have a smooth variation in color and gradients. However it’s not great at displaying sharp contrasting edges, lines or text. As with all good things there is usually a downside, and the downside for a JPG is that its file compression method reduces the color and detail of an image each time you re-save it.
Pros: Small file size and supports a wide range of colors
Cons: Loss of color detail, produces fuzzy edges around lines and text the more times you re-save it
GIF
A GIF can only show 256 colors with a set range palette that cannot be replaced or added to. However, since a GIF is limited to 256 colors, it produces a great compression with your files ending up very small. GIFs are good to use when you want to support transparency or create animations. The main downside to a GIF is that you are limited when it comes to colors. So if you are looking to use your logo in a website with a transparency, be aware that the color reproduction might not come out exactly as you want and the transparency might not come out seamlessly. In that instance your best bet is to save it as a PNG with a transparent background.
Pros: Small file size, no detail loss, supports transparency and animation and keeps edges clean
Cons: Reproduces in only 256 colors
PNG
PNG files are relatively new to the list of file formats. Originally, it was meant to be used as an alternative to a GIF. A PNG file has an extremely wide range of colors that can be reproduced. It allows sharp edges to come out flawlessly and compresses really well, giving you small file sizes— which makes it perfect for web use. One more aspect: as mentioned above, a PNG supports transparencies.
Sounds like the perfect format right? Unfortunately there is still a downside. A PNG file format can only be saved in RGB color modes, which means it’s only compatible with online programs and applications. Also PNGs are not supported in Internet Explorer 6 or earlier. So basically this means that if you’ve been living under a rock since 2001 and have not updated your browser you will not be able to view your PNG files.
Pros: Small file size, supports wide range of colors and transparency, good for sharp edges
Cons: RGB format only, not compatible with all platforms, not as well known
TIFF
The easiest way to describe a TIFF is to refer to it as a detailed JPG. When you save an image as a TIFF you do not have to worry about losing detail or color—meaning that everything stays exactly the way you wanted it. TIFFs also support transparencies. The downside to saving as a TIFF is that it usually results in a large file size, which is not conductive to online usage. Conversely, if you are only looking to save a high-resolution image for print then a TIFF is your best option.
Pros: Does not lose detail, supports wide range of colors and transparencies
Cons: Large file size, only use for printing
I do understand that this is a lot of info to remember, especially if you’re not a designer. Therefore, I’ve made a quick re-cap to ensure you are making the best decisions when saving your images:
- When working with web graphics that have solid colors and sharp edges, your best bet is to go with a PNG or GIF over JPG. You may get a smaller file size with JPG, but the downside is that the image quality will suffer the more you re-save it.
- For photographic images, go with a JPG over PNG or GIF. Just be mindful of the amount of compressions you make from your original photo.
- If you are only looking to use an image for print and are not concerned with file size, go with a TIFF instead of a JPG.
If you have any questions or want to ensure you’re formatting your images in the best possible way, BatesMeron has a team of experts willing to help.