You are here

Understanding File Types

Submitted by Katie on June 18, 2013 - 12:44pm

Cross posted from Sisarina

Understanding File Types

Managing design projects sometimes feels like swimming in a sea of acronyms. So much terminology, so many file extensions, so little time! There are png, psd, pdf, vector, gif, ai, high res files... just to name a few. Fun terms like lossy compression, bitmap and lossless data compression abound. Technology is miraculous, life-changing and often kind of confusing.

To make sense of it all, I decided to do a bit of research and consult with our Director of Pixels, Jason Malmberg. In the process, I discovered a few things:

  • One: these are some powerful and sophisticated tools that we have at our fingertips.
  • Two: a concise, clear explanation written for the layperson, wasn't easy to come by.
  • Three: hard and fast rules and definitions are even harder to come by, which might explain Two.

Katie's Image Extension Glossary:

Lossy Compression
As the name might imply, this is a way of encoding data in an image that, when compressing data, loses some of it. The more data lost, the more distorted the image will become. This isn't something you hear often, but can affect your images. {Personally, my favorite term. So much fun to say.}
Bitmap or Raster Images
These are files comprised of 'pixels', or itty-bitty squares, thousands and thousands of them. Pixels only come in one size, but in an enormous range of colors. The number of pixels a document contains determines its 'resolution'. If the document contains lots of pixels, it is often called 'high resolution'. {But you'll sound cooler if you say, "high res" in a very nonchalant way!} With bitmap/raster files, since there are a fixed number of pixels, they lose clarity if made significantly smaller or larger than the original. If expanded too much, the image becomes jagged and pixelated.


GIF (Graphics Interchange Format)
These used to be the standard for the web and when creating a transparent image. Now designers can get better results with .png files using less bandwidth; therefore, they are primarily used for simpler images and graphics
JPEG (Joint Photographic Experts Group)
Commonly used in digital photography, and for images in web design and when transparency of the image is not an issue.
PNG (Portable Network Graphics)
This type of file was created as an improvement and replacement for GIFs and is now widely used on the inter webs. They are best used when transparent backgrounds are needed and PNGs are quick loading.

How do you know which file to use when? Since all of these files involve a degree of compression, the goal is to find the correct tradeoff between compression, file size and image quality. As Jason explains,

"Think of it as a spectrum. The difference between a PNG and GIF is that the PNG can become smaller than the GIF while looking better. The GIF can look identical to the PNG, but the tradeoff is in file size."

PSD (Photo Shop Document)
This is a horse of a different color altogether. While it's still an example of a raster file, a PSD isn't compressed at all. It's primarily used to edit and composite images that will later be flattened and exported into another format, including the ones mentioned above and others.

This is by no means an exhaustive description of all the many file types floating around out there. Stay tuned for the next installment in the "Learn Along with Me" series when we dive into the waters of vector files, native files, ai, eps and the ever-popular svg file.