Can I have that as a jpg? A guide to graphic file formats
As a design studio we frequently get asked by clients ‘can I have that as a jpg?’ or ‘why can’t I open this eps?’.
We’re talking file formats here, perhaps not the most creative or indeed stimulating of design topics but still one of the most common and commonly misunderstood subjects of conversation between client and agency.
Every graphic, every logo, every image we shoot, design, produce and apply online or printed, is an image file. And every image file will be a particular file format, each optimised for a specific use. Get it right and the job is picture perfect, get it wrong and you get fuzzy all over, handed a giant download or an unsightly box with a cross in it at the bottom of your email.
So, bear with us, its not too long and its not too technical but what follows might just help the next time the press need a mugshot of the chairman, the exhibition centre need a logo fast or you’ve added a tiff from your photographer to your website and the whole things ground to a halt.
Lets start at the beginning. There are two basic file types that we all come across in our daily design and marketing lives:
Vector files
Vectors are great, they use maths rather than pixels to create images. This has two huge benefits, they can be scaled without any loss in quality, so the same logo file you used on your letterhead can be used on that 20ft billboard without worrying about resolution or print quality. The second is file size. A 20ft billboard created as a vector file will be many times smaller that the same design saved out as pixels. While there are always exceptions, generally speaking vector files are great for any image that uses flat colour and sharp edges.
From a designers point of view vectors are much easier to edit. With the right software you can change colours, keep transparent backgrounds, adjust shapes, all with a lot less work than if I had to use a raster file. Bottom line, always have a vector version of your logo, probably an .eps or a .ai and photos are never vector files!
Raster images
Raster images may not be a term you’ve heard a lot but this covers the majority of images you will come across. The photography you see on the web, the vast majority will be raster files, your holiday pics, raster files, you get … the picture. They use coloured pixels (square blocks) to form a complete image and are great for complex photographs. They do have one major drawback when compared to vector files however – scaling.
We’ll get into resolution below, but for now its important to realise raster images have a size at which they were created, this is fixed. You can use them smaller without too many issues but if they are scaled up beyond there original size you start to lose quality and images start to look blurred or ‘pixellated’ (when you can see the individual building blocks of the image).
A note on: Resolution It’s impossible to talk about raster images without looking at resolution. This is the density of pixels in any given image, normally expressed as dpi (dots per inch) or ppi (pixels per inch). For you and me these terms pretty much mean the same thing. Higher resolution means more pixels per inch, lower resolution means fewer pixels. Different applications require different resolutions – for professional print you need 300ppi ideally, on screen, well, there’s some debate but it seems to be somewhere between 72ppi and 133ppi.
What does this mean? It means raster image files will have been created for a specific purpose, and with a specific resolution in mind, and it’s not often that you can then reuse them elsewhere, or at larger sizes than when they were created. For instance, when you grab an image from the web, say your company logo, to print in a brochure, the chances are you won’t be able to, because its set up to work on screen, not in print, so the resolution, the dpi (or ppi), will simply not be large enough.
The most typical vector files
eps
Possibly the most common vector file format we use although pdf is hot on its heels. Its a vector so it can scale to any size you like and supports a transparent background so you can place it on a coloured or photographic background. It preserves the editing abilities in software like Adobe Illustrator and can be imported by most other design applications You should have your company logo in this format and if not, ask for it!
Your probably used to seeing newsletters, brochures and many other documents saved as pdfs, but it can also be used to save specific graphic elements, your logo for example, could be saved out as a pdf. A pdf is vector-based (unless it contains rasterised images like photos) so is scalable and good enough to print from and is also viewable by most users.Pdf files which do contain images can still be printed as long as they are set up at the correct resolution.
ai
The native vector file format for Abobe Illustrator. If you are an Adobe Illustrator user then this is the file you’ll probably save as and work on. However it’s rare for this file type to go client side as you’ll need Illustrator to open it. Artwork will normally be saved out as something else (an eps or pdf) before being imported into another application or passed on to a client.
The most typical raster files
jpeg
Jpegs exist to compress photographic images and they are really good at it. You can use them for any photography element, across both print and screen and are compatible with most software programs including Word and PowerPoint. One note of caution, jpgs achieve there small file sizes by removing bits of information from the image you are saving and once that information is gone, its gone.If an image is heavily compressed for the web, you can’t then go back and scale it to its original size, so always keep an original and produce a copy if your saving out as a jpg and reducing its file size.
tif
Tifs are most commonly used for saving high quality photographic images. As a consequence they tend to end up as large or very large memory files and are pretty much used exclusively for print. Tif files should never be used online or for screen-based presentations.
pngDesigned to be an improved replacement for the standard gif they are another format only used on-screen as they only allow for RGB colours. They come in two sizes 8 and 24 (bit) the basic difference – 8 bit has 256 colours while 24bit can have millions. Great for images with large areas of flat colour and better at dealing with gradients than the gif they can also have transparent backgrounds which is another big plus.Mainly used for icons, buttons and illustrations but not so good for photographic images where the jpgs compression will give you the same quality with a smaller file size.
gif
For use on screen only! Always in RGB and never more than 256 colours. This makes them good for icons, buttons, some simple illustration, basically images with large flat areas of colour and little or no gradients. Where they come into there own is in their animated form where short animations can be created reasonably easily and with very smallfile sizes. They are rubbish for photography though, or for anything with a gradient in it.