You’ve all seen them at one point or another, JPG, PNG, BMP, GIF, etc. But do you know what those file extensions mean or what they are used for? What about EPS, PSD, or AI files? Unless you are a web or print professional, it is likely you are not familiar with all of them or don’t know the differences between them. There are many more file types out there, and you might have a general idea about them, but we will examine 10 of the most common.
Vector vs. Raster
Let’s begin but examining a crucial differentiation in file types. Images can be put into two basic categories, vector and raster. The basic difference between these two file types are that vector graphics are easily scalable, while raster images are not. Vector graphics are composed of points and lines (or paths). Raster graphics, meanwhile, are composed of pixels (or individual dots). This becomes most clear to individuals when they attempt to enlarge a raster image and it becomes “pixelated.” In other words, distorted or blurry. Vector images use proportional formulas (aka math) to determine shapes at any size. This is the basic reason why vector images are used for logos, or in print design. Raster images are also commonly used in print, they are just high resolution.
I must also mention resolution. Resolution translates to how detailed your image is. This is determined by DPI or PPI (dots per inch / pixels per inch) and basically refers to the density of an image. This most immediately comes into play when deciding whether you need a web or print design. Websites display images at 72 DPI, while print images are commonly at least 300 DPI.
CMYK vs. RGB
This topic deserves its own post as there is a whole lot to say about it, but for our purposes here, I will just give a basic overview. In very general terms, RGB (red, green, blue) is best for the web, and CMYK (cyan, magenta, yellow, black) is best for print. Both of these color modes have a limited gamut (a complete range or scope of something), and conversions can be tricky. Why? Well, RGB is “additive” while CMYK is “subtractive.” What does that mean? Additive color mixing begins with black and ends with white; as more color is added, the result is lighter and tends to white. Subtractive color mixing means that one begins with white and ends with black; as one adds color, the result gets darker and tends to black. Computer monitors emit color as RGB light while inked paper will absorb or reflect specific wavelengths.
You know have a basic understanding of image types and some of their properties, so let’s look at the specific file extensions, and when is the best time to use them.
While this is indeed a filetype, bitmaps are also used interchangeably to refer to raster images altogether. Bitmaps are defined as a mesh of pixels. Each pixel contains a color value. Bitmaps can contain a lot of detail, but in general are very large files and thus are not used very commonly.
2. JPEG (or JPG)
Joint Photographic Experts Group
By far the most common image file type is the JPG (or JPEG). A JPG is a raster image and the quality of the image will decrease as the file size decreases. JPGs are most commonly used on the web, but are also used in Word documents and you will also find them in your phone’s camera every time you snap a picture.
Portable Network Graphics
Another increasingly common file type is the PNG. These files are also better for the web than they are for print. What makes PNG special is that they can have a broad color spectrum and have a transparent background. If you have a logo or image that is white, or if you don’t want a white box around your logo, this becomes really important.
Graphics Interchange Format
A GIF (Pronounced “jif” according to its founder) is known for being animated, though they certainly are not always. GIFs can are made up of 256 colors in the RGB color mode. File sizes are often smaller as this file type uses a limited number of colors. GIFs can also have transparent backgrounds.
Tagged Image File Format
A TIFF is a raster file that has vector-like properties. That is, it doesn’t lose quality when it’s resized. However, these file types are usually very large and are not suitable for the web as they will take a very long time to load. They are more commonly used when saving photographs for print.
Scalable Vector Graphics
An SVG is an XML-based vector image format with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files.
An EPS is a vector format file most often used for print. Almost any kind of design software can create an EPS, most notably Adobe Illustrator, but other software programs, such as Quark and Corel Draw can also create and view EPS files.
Adobe Illustrator Document
The large majority of graphic designers use Adobe products to work with images. Adobe Illustrator is the flagship program to work with vector images and is used to create AI files. Adobe Illustrator can also create various other file types, such a EPS, PDF, and SVG files.
To be technical, a PSD is not just an image file type. PSDs are viewed using Adobe Photoshop, another hugely popular Adobe product. This type of file contains “layers” that make modifying the image much easier to handle. Photoshop generates raster files though it is possible to work with vector images within the program. Users will not be able to view this file type without the program.
Portable Document Format
To be technical once again, a PDF is more of a document type than an image type, though it can be used view images, so I have included it here. PDFs are also an Adobe product, created with the goal of being a universally viewable file. In large part, this goal has been achieved. Many print shops can use PDFs for print projects (if they are high resolution). PDFs are considered to be an excellent file type for sharing graphics.
As you can see, there are many ways to display an image, and instances where it makes a lot of sense to favor one file type over the other. Having a basic understanding not only of file types but also the concepts of vector and raster, as well as color modes will greatly help when working on a design project.