What’s the difference between a JPEG and PNG, GIF, TIFF and EPS?

Share This

Whether you’re designing a PowerPoint presentation, a brochure or a website, chances are you’ll need to include photographs, illustrations, figures or charts. Here is a guide to help you choose which digital image format to use. But first, you have to understand the difference between a Raster image and a Vector image.

Raster

A raster image is made of a collection of dots called pixels. A 72 dpi image is made of 72 dots-per-inch (dpi) or 72 pixels (ppi) in every inch of that image.

The number of pixels that comprise a raster image is called the resolution and it is fixed. If you take a 72 dpi image and scale it up 300%, you will not increase the number of pixels or dots of that image, you will simply increase the size of each pixel or dot. The result will be an image where you can clearly see the pixels and no fine detail. This is why it is recommended to use a high dpi like 300 at size as to get a quality image.

Raster images are generally used for photography or illustrations that have been scanned, or photos from cameras and phones that work with a raster-based program like photoshop.

Vector

A vector image is made of paths. A path can be a line, a square or a shape. Paths are used to render typography and to create anything from simple diagrams to complex illustrations. Paths are not fixed.

Vector images are ideal for when detail preservation is critical as in text, logos and flat illustrations.

Vector images can be scaled to a larger size and do not lose any image quality because they are made of paths and not dots (pixels).

Here is a handy summary of the most popular file formats and where to use them. You’ll notice that all the formats are Raster except for the EPS.

JPEG
Type: Raster
Image: Photographs, illustrations, web and digital graphics
Where to use: Website, PowerPoint and Keynote presentation. Ideal for when small files are required.

TIFF
Type: Raster
Image: Photographs and illustrations
Where to use: Print. Ideal for when high resolution is required.

GIF
Type: Raster
Image: Web and digital
Where to use: Web applications, PowerPoint and Keynote presentations. Ideal for simple animations.

PNG
Type: Raster
Image: Web and digital
Where to use: Web applications, PowerPoint and Keynote presentations, and digital printed materials. Ideal for when you need an image with a transparent background.

EPS
Type: Vector
Image: Logos, diagrams, illustrations, figures, charts
Where to use: Print materials produced using professional print design programs like Adobe InDesign or Illustrator.

Here’s a handy image to share: