The ABCs of graphic file formats

Graphics and images are one of the most important parts of any printed or marketing materials. Whether they be a logo, or a full colour photograph, they help portray your company’s image to the reader. But there are so many file formats. It’s like an alphabet soup of letters! Let’s look at the different file formats and what it all means.

There are two main types of graphics; vector graphics, and raster images (also called rasterized images). Both are used for different purposes and are built differently.

Vector Graphics

Let’s look at vector graphics first. Drawing programs such as Corel Draw, or Adobe Illustrator, create vector graphics, made up of lines and curves joined at a point called a node. They are defined as mathematical objects, called vectors. An image is a collection of these objects filled with colour. Due to the mathematical quality of these graphics, they can be resized and still retain exceptional quality and sharpness. Because of this, vector graphics are used to create fonts, and bold graphics that must retain crisp lines and colours when scaled to various sizes. For example, logos are often vector graphics. Vector images have no background. This means that whatever is placed behind them in your design shows through the empty spaces.

The file extensions (the letters after the dot in the file name) you will see for vector images are most commonly EPS (Encapsulated Postscript), AI (Adobe Illustrator) and CDR (Corel Draw). These are the most common. Other drawing programs have their own extensions.

A special note about EPS files: The EPS file format was developed as a platform-independent (Mac or PC) and software-independent format that retains all colour and image information needed for producing printing plates. Unfortunately you cannot assume that all EPS files are vector images, since they are used for photographic, i.e. raster images, too.

Raster Images

The other type of graphic is the raster image. Some people call them bitmap images. Technically, a bitmap is a specific kind of raster image that has only one colour. Paint and image-editing software, such as Adobe Photoshop, Corel Photo Paint, Painter and Microsoft Paint create raster images. These images use a grid of small squares called pixels to create graphics. Each pixel in an image has one specific colour and location assigned to it. Up close, the image has a mosaic quality, but at its normal resolution, it looks like it should. Think of a needlepoint canvas. The picture is created by small squares of colour. When you stand back, you see the picture. Raster images, however, cannot be freely resized. Because they are made up of small squares, when the image grows larger, the squares grow larger, giving a “jagged” or “out of focus” look to the image. If you shrink a raster image, it gets sharper because the squares become smaller. But you can’t successfully enlarge one. Photographs are the most common use of raster images. Graphics on web sites are raster images.

When discussing raster file format we get into a real alphabet soup! The most common file extensions are JPG (or JPEG), GIF, PNG, TIF (or TIFF), BMP and our friend EPS. Of course there are also the file extensions for proprietary formats – PSD for Photoshop and CPT for Photo Paint, etc. Each file format was developed to serve a different purpose.

The raster image can be divided into two categories according to their intended use: If you want to print your image on paper, it must be high resolution. Normally printers prefer a resolution of 300 dots per inch (dpi). A black and white image with no shades of gray requires at least 600 dpi. EPS, TIF and are intended for print applications. They can hold all information for high quality printing. a JPG can be saved at high quality for print, but it’s no guarantee of quality.

The GIF, PNG and JPG are intended for web and multimedia use. The optimum resolution for web images is 72 dpi. You can see that, with the difference in resolution between 72 dpi and 300 dpi, an image taken from a web site will simply not not work for print environments. A useful guideline: the on-screen image should look four times bigger than you want it in print.

It is important to remember that the higher the resolution, the larger the file size – the file size increases exponentially. Also worth noting is that you can take an image at 300 dpi and reduce its resolution (for the web), but you cannot take a low resolution image (from the web) and increase the resolution (for printing). Well, you can, but it would either be really bad looking or you could only print it at 1⁄4 its original size.

There are more issues with the use of graphics in print, web and multimedia applications. But this is a good start. If you have more questions, talk with your designer. An experienced designer will understand the differences and how they are used to best advantage.