Designer Tips: Image formats

What’s the difference between a JPEG and an EPS? Raster and vector graphics? If all this sounds like gibberish, then you are not alone.

It’s not just designers who have to deal with preparing and choosing graphics for a project. You might have never ventured into Photoshop or dabbled in InDesign but you might find yourself being asked by a printer for a print quality version of your logo, or need to supply a photo to a publication for a PR piece. So we thought it would be useful to give you a jargon-free run down of what you should look out for when it comes to your images and graphics.

There are a range of file formats used for images and graphics and they each have their own benefits and shortcomings. But they mainly fall into two types of image format; raster or vector.

Raster

A rasterised image’s data is stored as a grid of coloured pixels. A raster image is characterised by the width and height of the image in pixels. For example an image could be 500 pixels wide by 200 pixels high, so that the data for this image would contain the colour for each pixel in this grid amounting to a total of 100,000 pixels. Sometimes referred to as a bitmap image as the colour for each pixel is specified by a number of bits (the smallest unit of data on a computer) mapped out over the image grid.

The essential thing to remember about raster graphics is that they cannot scale up to larger sizes without losing quality. So if an image is 500 pixels by 200 pixels, if you need this to appear at 1000 pixels by 400 pixels, the information for those extra pixels just isn’t stored in the image data. Depending how the image is being scaled up the application may guess at what colour the additional pixels will be or simply replicate the data from the surrounding pixels. Results will vary but ultimately the image will either look blurred or blocky depending on how it is being reproduced. Photoshop and other modern image editing software can do an increasingly better job of scaling up raster images with intelligent scaling effects, but does require a working knowledge of these applications and the results are still not perfect.

Raster image formats

JPEG (Joint Photographic Experts Group): These are images with the file extension .jpg or .jpeg. One of the most popular raster formats they are capable of a high degree of flexibility in controlling the level of image quality and file size. JPEGS images cannot have transparent backgrounds.

PNG (Portable Network Graphics): These are images with the file extension .png. Another raster format similar to a JPEG but can be used for images with transparent backgrounds.

GIF (Graphics Interchange Format): These are images with the file extension .gif. Similar to PNGs and can be used for images with transparent backgrounds. Gifs have another trick up their sleeve in that they can be formed of multiple frames to create a simple animation effect.

EPS (Encapsulated PostScript): These are images with the file extension .eps. This file type can be confusing, as an EPS can be either be a raster image, created using an application such as Adobe Photoshop, or a vector EPS created by an application such as Adobe Illustrator or Corel Draw. In most instance if you come across an EPS file it will be a vector format as there are better formats for creating raster graphics.

Vector

In contract to raster graphics, a vector image stores data about the points, lines and curves that make up the shapes used in an image. For example if the image was of a triangle, data would be stored about the position of the three points of the triangle, the angle of the lines from each point and what colour is contained within the shape. Essentially the data holds the instructions on how to draw the shape, but because this isn’t constrained by a set grid of pixels, vector graphics can be scaled to any size without losing any quality. For this reason vector graphics are often used for logos and graphics that need to appear at a variety of sizes from business cards to billboards.

The downside of vectors is that the image has to be created from shapes constructed from points and lines, which is perfect for graphics such as a logo, but not so good when trying to display a photograph. Although photographs can be vectorised, they tend to be stylised versions of an image. For a vectorised photograph to look ‘real’ it would have to contain a huge amount of points and shapes, so many in fact that the quantity of data would become unworkable. Of course there are many examples of highly complex vector graphics but it's pretty rare to encounter any that display true photographic realism.

Vector image formats

EPS (Encapsulated PostScript): These are images with the file extension .eps. As mentioned above this file type can be either be a vector EPS created by an application such as Adobe Illustrator or Corel Draw, or a raster image, created using an application such as Adobe Photoshop (but will most likely be a vector image).

SVG (Scalable Vector Graphics): These are images with the file extension .svg. These are a newer vector format that has become incredibly popular in recent years for one simple reason; the SVG format has been developed specifically to be used on the web. With screen resolutions increasing in quality every year it means next year that once pixel perfect logo won’t suddenly look blurred on the latest devices.

In summary

In essence raster graphics are best for photographs but are limited to the pixel dimensions of the image. Vector graphics are perfect for reproducing at any size, but are best when working with non-photographic or stylised images.