IFAS ExtensionUniversity of Florida
Login

Graphic File Formats

Ricky Telg and Ashley McLeod-Morin

This publication on graphic file formats is the fourth of a five-part series on document design. This series also covers the document design process, principles of document design, elements of document design, and brochure and newsletter design.

Introduction

When designing documents, you also have to be aware of the different types of images you may receive. This publication, created for anyone with an interest in designing effective documents, provides an overview of raster graphics and vector graphics.

Raster graphic with vector overlay.
Figure 1. Raster graphic with vector overlay. Credits: Chris Wilcox, CC BY-NC-ND 2.0, http://flic.kr/p/51npn

Raster Graphics

Raster graphics—are images made up of pixels (picture elements), most notably as photographs. Raster graphics are limited in their size and shape and are linked to the image’s resolution, a measurement of how closely packed the pixels are together in the image. Resolution is usually measured as pixels per inch (ppi).

Because raster graphics are tied to resolution, they limit modification. Resizing, also known as scaling, is a particular problem. If you stretch a small raster graphic to make it larger, each original pixel is actually spread out, leading to a distorted, jagged look known as pixilation. Raster graphics intended for print should have a higher resolution, usually around 300 ppi. Raster graphics for screen view purposes (e.g., tablets, computer monitors/laptops, and smartphones) and not intended for print will often have a relatively low resolution by comparison, ranging from 72 to 100 ppi on average. Because of the higher resolution needed for print versions of raster graphics, the file sizes tend to be large. Raster graphics are usually in one of the following graphic file formats: TIFFs, JPEGs, or GIFs.

.tiff/.tif

TIFF stands for Tagged Image File Format. A file format that can be read by most graphics programs, the TIFF is commonly used in publishing and document programs. A TIFF is a large file, and because it is less compressed than other file formats such as JPEGs, a TIFF provides high-resolution imaging.

.jpg/.jpeg

The term JPEG was created by the Joint Photographic Experts Group to describe a method used to reduce digital image file size in varying degrees with minimal component loss. A JPEG image is a compressed file, meaning that some information is discarded. Many digital cameras capture photographs in the JPEG format. Indeed, JPEG is the most common file format for photographic images today, especially those shown on web pages.

.gif

GIF stands for Graphics Interchange Format. GIF files are extremely small file sizes, because they can only use a maximum of 256 colors. GIFs are used for creating line art (logos, diagrams, etc.) for the web. GIFs are unsuitable for print documents because their resolution is so low. GIFs can also be short, animated clips.

For publishing printed documents, photographs should be saved in the TIFF format. For photographs that will go on the web or television, use JPEG.

Two other graphic file formats are PNG and RAW. These are not as common as TIFF, JPG, and GIF files. PNG stands for Portable Network Graphics. PNG is a compressed format designed as an alternative to GIF. It can be used for line art and photographs; therefore, it is more versatile. However, PNG has not caught on with graphic designers and is generally not widely used. RAW is designed to capture images from digital cameras. The files are large, and the quality of the photographs is high. Images captured in RAW are usually resaved as TIFF or JPG files during the document design process.

Vector Graphics

Vector graphics are images composed of mathematically defined shapes created by using illustration programs such as CorelDraw® or Adobe® Illustrator®. Usually vector graphics consist of drawings, such as lines, curves, and geometric shapes. Raster graphics describe every pixel in the graphic whereas vector graphics use mathematical algorithms to describe the lines, shapes, patterns, and colors of drawing objects.

Example showing effect of vector graphics versus raster graphics. The original vector-based illustration is at the left. The upper-right image illustrates magnification of 7x as a vector image. The lower-right image illustrates the same magnification as a raster (bitmap) image. Raster images are based on pixels and thus scale with loss of clarity, while vector-based images can be scaled indefinitely without loss of quality.
Figure 2. Example showing effect of vector graphics versus raster graphics. The original vector-based illustration is at the left. The upper-right image illustrates magnification of 7x as a vector image. The lower-right image illustrates the same magnification as a raster (bitmap) image. Raster images are based on pixels and thus scale with loss of clarity, while vector-based images can be scaled indefinitely without loss of quality. Credits: Darth Stabro/Wikimedia Foundation, CC BY-SA 3.0

As shown in Figure 2, vector graphics can be resized (scaled) without looking pixilated. Vector graphics work best for drawing images with sharp edges and consistent areas of color, such as line art, diagrams, maps, and statistical graphics. The file format most commonly associated with vector graphics is the EPS, meaning Encapsulated PostScript. Resolution is not an issue with an EPS file unless raster effects have been added.

Additional Information

Diggs-Brown, B., & Glou, J. (2004). The PR styleguide: Formats for public relations practice. Belmont, CA: Wadsworth.

Kimball, M. A., & Hawkins, A. R. (2008) Document design: A guide for technical communicators. Boston, MA: Bedford/St. Martin’s.

Marsh, C., Guth, D. W., & Short, B. P. (2005) Strategic writing: Multimedia writing for public relations, advertising, sales and marketing. Boston, MA: Pearson Education.

Telg, R., & Irani, T. A. (2012). Agricultural communications in action: A hands-on approach. Clifton Park, NY: Delmar.