Demystifying image file formats

Vector vs. Raster

Vector images

are created using geometrical formulas in programs such as Adobe Illustrator. Vector artwork is made up of a series of points and lines that uses math to determine how to fill the space between those points. Because it is math-based vector artwork can be scaled infinitely without losing quality, as opposed to raster or pixel based images.

Raster or bitmap images

are made of pixels and are typically images such as JPEG, TIFF, & PNG. Because they are pixel dependent, enlarging them too much makes them look pixelated. Raster graphics are sometimes referred to as contones from “continuous tones” and vector graphics as “line work”.

JPEG (Joint Photographic Experts Group)

An image format best used for on the web, but is also acceptable for printed jobs. It uses a lossy compression method, meaning that it throws away image data/detail in order to make an image file size smaller. When saving a JPEG the user can choose a quality range from 1 – 100 with 1 being very poor, and 100 being the highest quality. The size of the file depends on the quality selected. The color range is limitless with millions of colors available. (To avoid confusion: the file extension is .jpg but is the file is referred to as JPEG.)

TIFF (Tagged Image File Format)

A preferred image format with which to print. It uses lossless compression meaning that it keeps all the image data. While great for detail, it can also create very large image file sizes. Tiffs are also used for as an alternative to PSDs for storing images because they support the same qualities without being software specific. They support layers as well as transparency.

GIF (Graphic Interchange Format)

Another image format for the web, but in contrast to JPEG, it supports transparency. It uses lossless compression but limits color availability to 256. Still more widely used than PNG. The only widely accepted format that supports animation.

PNG (Portable Network Graphics)

A lossless file format created as an patent-free alternative to GIF in the mid 1990’s. It has better compression and transparency options than GIF. It is largely supported across most browsers, except for Internet Explorer. Below IE version 4 it is not supported at all and even newer versions still do not support certain elements of PNG capabilities. It comes in two different kinds: PNG8 and PNG24. The difference is PNG24 supports millions of colors while PNG8 only supports up to 256 colors. As a result PNG8 files are much smaller.

EPS (Encapsulated Postscript File)

This is a vector file format which can be read across different programs on MAC or PC computers. Raster images can be saved as EPS files, but will still remain uneditable with a vector editing program such as Illustrator. Saving a raster image as an EPS file is essentially the equivalent of plastic fruit; it looks like real fruit, but you can’t really cook with it or change its form to fit your nutritional needs. If a designer asks for a EPS version of a logo, they are asking for the fully vector-editable version.

AI (Adobe Illustrator)

The native file format of Illustrator, the vector graphics creation software from Adobe. Most logos are created in this program (or its equivalent).

PSD (Photoshop Document)

The native image file format of Photoshop, the raster graphics and photo manipulation software from Adobe.

Bottom line: use the best image format for the job and when in doubt reference this handy chart

image file format reference chart by openbox9

avatar

With a passion for communicating through design and an OCD level of pixel-perfection, Hannah continually seeks to refine the poetry of her code.
June 1st, 2011 // //
ShowHide Comments
Loading...