Image Formats Cheat Sheet – All you need to know about JPEGs, TIFFS, GIFs, PNGs & BMPs

Not all image formats are created equal. All have different uses and different attributes.

Know exactly what image format to use for web use, print, social platforms, logos and much more with this handy cheat sheet.

Share this image on your site!

JPEG vs PNG vs GIF – What’s the Difference?

Whether you’re browsing the web on a PC, scrolling on a tablet or thumbing through a magazine, there’s one universal commonality – high quality imagery.

As technology has improved, the graphics in what we read and browse on a daily basis has become consistently sharp. While this looks easy enough to an end user, anyone working with images on a routine basis knows how much complexity there can actually be.

Even if you’re new to working with graphics, you’re likely still aware that there are a multitude of file formats for images. Older standards such as bitmap and TIFF have been around since what was essentially the beginning of computer graphics. Newer formats – GIFV and SVG, for instance – are slowly carving out their niche in the world.

While there are dozens of different formats, today we’re going to be looking at the three most common types. These are GIF, JPEG and PNG. Whether you’re working with images for web or for print use, these are the most common file formats that you’re going to encounter. Chances are you’ve heard of these but don’t have a clear grasp on what the technical differences are or how to know which one to use. With that said, let’s take a look at the formats and when to use them.

GIF

The oldest of the three, GIF images have been around since the late 1980s. The compression format is lossless, which means that you can save the file over and over and the quality won’t degrade. These are strong advantages to the standard, as a GIF file takes up significantly less space than an uncompressed image while not sacrificing quality.

While those are great attributes, the GIF standard does have one major drawback: It only supports 256 colors. This makes GIF a format best suited for basic images such as logos or simple drawings. A photograph saved as a GIF would suffer from a loss of color depth and shading.

Still, there is another aspect of GIF that has helped the format endure as long as it has. GIF supports animation. This makes it ideal for use in a number of scenarios where it might otherwise not be. Sports blogs and websites have started to use GIF images to show highlights. Unlike a video, a GIF can play directly in a mobile browser, letting writers use it to show clips that are being referenced in the writing. This same use case applies to other areas of the web, such as how-to pages that use GIFs to illustrate ideas.

Best for: Logos, simple graphics, animations and video clips where image quality isn’t a high priority.
Avoid it for: Saving photos, printed documents or graphics that need a large color palette.

JPEG

The JPEG format is virtually synonymous with digital photography. Virtually all modern cameras offer it as a default setting. This is owed to the fact that the standard offers what basically is an unlimited color palette. The compression algorithms keep the file size that’s smaller than what a GIF file produces without limiting the colors you can use. The overall quality of the image will be degraded since JPEG uses lossy compression. This might sound concerning, but it’s rare for it to be an issue as long as the creator of the file uses the correct settings.

While all of this sounds great, JPEG does have some weaknesses. Because of the compression algorithm that’s used, text and basic graphics will develop a sort of fuzziness when saved as a JPEG. It’s a tremendous option for photographs, where the color palette is likely to be broad and the loss of quality imperceptible. However, the compression aspect means it’s not an ideal format for more simple images.

There can also be a bit of a learning curve with using JPEG. The standard allows for the user to adjust the ratio of picture quality to file size. For most people this boils down to trial and error. If you play with saving photos of varying color complexity at different quality levels, you’ll soon develop a feel for the safe range of compression.

Best for: Photographs and graphics that involve gradients or other broad color ranges.
Avoid it for: Logos and line drawings.

PNG

As the youngest of the image formats we’re discussing here, the PNG standard is a bit of a mixed bag. It’s not a format that you’ll use all the time, but it does have its uses. There are actually two variants of the format: PNG-8 offers lossless compression on an indexed color palette, while PNG-24 offers lossless compression with the same support for thousands of colors that you’d find in a JPEG.

PNG-8 acts as a more modern version of the GIF standard. Its lossless format and color palette match what is found in a GIF. However, a PNG-8 image will result in a smaller file than a GIF with the same data. This is beneficial if you’re working with hundreds of images or building a high-traffic website. Saving a few kilobytes on one file isn’t drastic, but it adds up in those scenarios. PNG-8 also offers better support for transparency than a GIF file.

Conversely, PNG-24 works as a sort of high-fidelity image format. The quality is lossless and the color palette is just as wide as what’s available in a JPEG. This does come at a cost to the file’s size, though. A PNG-24 file can be multiple times as large as a JPEG file with the same information. In most situations it won’t be worth the increase in file size since JPEG files have a very minimal reduction in quality. The most common use case where a PNG-24 format will make sense is if you’re working with materials that will ultimately be printed.

PNG-24 does have one other trick up its sleeve, and that is support for transparency in images. If you’re working in an environment where you’ll need transparency as well as optimal image quality, PNG-24 is what you’ll likely end up going with. Otherwise you’ll resort to JPEG in most cases.

Best for: (PNG-8) Situations where you might otherwise use a GIF but don’t need it to animate, or when you need better transparency functionality than a GIF.
Avoid it for: (PNG-8) Anything that needs animation or where file sizes need to be minimized.

Best for: (PNG-24) High-resolution or high-contrast images that will ultimately make their way to print, or similar images for web use that require transparency.
Avoid it for: (PNG-24) Photos that will be hosted on the web.

Conclusion

Hopefully this article has worked to demystify some of the confusion you may have had about the various image formats that are available. While we’ve only scratched the surface of what’s available, you should now have a working understanding of the most common image types and when to use them. Having this much of a grasp on the subject will be enough in most cases, although you’ll still want to learn more when you can.

A big part of choosing the format you want to work with comes down to your own preferences and needs. Don’t be afraid to experiment with a few different formats on the same image. With enough time and practice, you’ll find that picking the right format becomes an almost automatic process.