A Introduction to Image File Formats for non-Designers

The most important thing to know about image formats is that any single image format is not usable for every situation. One size doesn’t fit all. The common JPG, for example, is not the only type of image file. And some of the other image formats are better suited to certain kinds of projects. A basic understanding of the difference between these formats and when they should be used will help you better communicate with a designer … and give you better results when working with images yourself.

TYPES OF IMAGE FILES

There are two basic types of image formats. Organically, they are completely different species. The type you’re most familiar with, JPG or TIFF, is made up of pixels, thousands or millions of tiny square building blocks that comprise the overall image. The pixels are fixed in size at birth, like tiles in a mosaic. Because of the fine gradations of color this format achieves, it is ideally suited for photographs.

The other type of image format, and the one most unfamiliar to non-designers, is the vector-based format, created with the applications Adobe Illustrator or Macromedia Freehand. This format doesn’t use pixels; instead, every element within the image is mapped out with coordinates for size and placement like a blueprint. As such, it’s ideally suited to create artwork that will need to be proportionately scaled up or down in size.

“Vector-based” Illustrator or Freehand files
Illustrator and Freehand files are extremely important for the designer. Because they can be enlarged or reduced as much as desired without degrading the quality, they are the preferred format for logos and certain types of illustration. A logo created in Illustrator or Freehand can be used on a business card or a giant billboard, and it will look just as good. You can’t do that with a JPG or TIFF. What’s more, the designer can easily convert the vector-based format to pixel-based formats when needed.

If you will be working with a new designer, they will surely request an original Illustrator or Freehand file of your logo. If it cannot be found, they may have to recreate the file. A small two inch JPG might be fine for the web, but it will be woefully inadequate for a print project.

Pixel-based file formats
Pixel-based image files are the type that you are probably most familiar with. They’re usually photos, like the JPGs that come attached to emails. Any computer can display these images, but to edit them you need photo editing software. Adobe Photoshop is the de facto standard for designers; however, Adobe also offers Photoshop Elements, a $99 version of it’s $600 parent. Though it has fewer features, it’s still an excellent choice for image editing like resizing and color correction.

What is a pixel and what is resolution? Think of a pixel-based digital image like a mosaic of square tiles. Any individual pixel is like a tile. Imagine that this mosaic is made up of thousands and thousands of tiles in many, many rows. With so many tiles to play with, you can describe a more detailed image. Now imagine that the a mosaic of the same overall size uses very large tiles. You would have far fewer tiles to play with in the allotted space and so would not be able to show as much detail in the image. That’s what resolution is: how much information, or how many pixels, are packed into the file. More pixels equals more information and detail.

Thus, pixel-based images are resolution dependent. Unlike vector-based Illustrator or Freehand files, they cannot be enlarged indefinitely without the quality of the image eventually breaking down (blurriness or pixillation). That’s why designers take such pains to ensure that any given image has the right resolution for it’s intended purpose.

Below are the pixel-based image formats that designers typically work with. Each description is followed by guidelines for usage.

TIFFs. TIFFs are the granddaddy of all pixel-based file formats. Why? Because they are recognized by all software applications, even word processors, and they are interchangeable between Macs and PC (especially important when you consider that nearly all designer work on Macs). And you can easily convert them to other pixel-based formats like JPGs or GIFs.

Best format in which to give files to a designer.
Acceptable in all applications.
Cannot be used on the web.
Resolution dependent; requiring a resolution adjusted for size of the image.

JPGs. JPGs are much the same as TIFFs. The only difference is that JPGs are compressed so that file sizes are smaller. That’s why JPGs are the preferred format for the web and sending images through email.

While compression is generally a desirable thing, JPGs use a type of compression that degrades the image quality the more you compress it. Perhaps you’ve seen the telltale signs of an overly-compressed JPG—blurry, splotchy patches called artifacts. In the image below, look closely at the light areas around the pilot and the rim of the cockpit. What’s more, each time the file is re-saved (in a photo editing program) the image is re-JPGed and more artifacts are added. Over time, the image degradation becomes more and more apparent.

Since JPGs can potentially carry some imperfection, designers prefer to start with a TIFF which has no such damaging compression. They can re-export the image using the amount of compression appropriate for the particular usage. A JPG may be used in place of a TIFF, but only if it has been saved with the minimum compression.

Not suitable for commercial publications unless they’ve been minimally compressed.
Generally suitable for printing out photos from your desktop inkjet.
Ideal for speeding up email and web transfer.
Resolution dependent, requiring a resolution adjusted for size of the image.
Results obtained are entirely based on how much compression is used.

GIFs. GIFs are used only for the web. They are also compressed; however, their shortcomings are not the introduction of artifacts; rather, the limited number of colors used. A JPG or TIFF uses thousands or millions of different colored pixels, while a GIF uses no more than 256 colors. (The more colors an image has the better it looks.) It might surprise you to know that many of the graphics you see on web pages are made with as few as 8 or 16 colors. The more colors the GIFs uses the bigger the file.

Never use anywhere but on the web.
Not an adequate file type print production, as the color range has been severely restricted.
Resolution dependent, requiring a resolution adjusted for size of the image.

Resolution and why it matters

Resolution and it's relationship to output quality is one of the most misunderstood concepts in printing. This brief overview is not intended to fully explain resolution, but give you a basic idea of why it is so important.

Appropriate image resolution will vary depending on what kind of printer you are using. A printer's capability to print sharp and detailed photos is rated by its "dpi" (dots per inch). For example, a laser printer may be referred to as a "600 dpi printer" or a "1200 dpi printer." Inkjet printers have dpi’s of 360, 720, 1440 and higher. Commercial printers use output devices that are even higher than that. Higher dpi, of course, is better because it uses smaller dots to produce finer images. But the higher the dpi of the printer, the higher the resolution the image needs to be in order to take advantage of the higher dpi.

Thus, a designer will always prefer to start with a digital image that has the highest resolution possible. It’s easy to lower resolution (throw away unnecessary information), but impossible to increase resolution (add information).

REQUESTING FILES FROM A DESIGNER

There will be times when you need an image file from your designer for a project you are handling at the office. But just any file will not do. In order for the designer to give you a file in the right color, size and resolution, you’ll first need to provide some specific information:

Will the image be used in print or on the web?
How many colors will it use? (That’s often determined by the type of printing you are using: one-, two-, three-, or four-color printing.
If requesting a photo, do you want it in black and white or color?
If requesting a photo, approximately how big will the photo be used? (Very important for determining the appropriate resolution.)
If your project is being printed on your office desktop printer, what is the dpi of the printer?
If your project is being handed off to an outside vendor, it is sometimes easier to put the designer in touch with the vendor.