Image File Formats Explained - Part 1

Learn which file formats you should be using to get the best results.

Introduction

In this digital day and age there are so many different programs and files that can do all sorts of things, and it can become quite difficult to work out which file formats you need to be using.

In this mini guide I'll go over some of the more common file formats you will encounter while working on your design projects, tell you what each of them means and the situations each one should be used in.

Raster and Vector

There are two overarching types of graphic file formats: raster and vector.

Raster graphics are a dot matrix data structure usually made up of a pixel grid. The more pixels in the grid the higher the level of detail in the graphic.

The density of pixels is represented by PPI (pixels per inch) and DPI (dots per inch). DPI and PPI are the same measurements - the only difference is that DPI only applies to printed media while PPI is considered more for digital graphics intended to be viewed on screens  i.e. websites and videos.

However, because raster graphics rely on these small pixel squares they have limitations when it comes to scaling. When you increase the scale of a graphic you are essentially increasing the size of the pixel, and once you reach a certain point the pixels become so visible that the image loses all of its original shape and detail.

Vector graphics are more like a mathematical formulae, using polygons to generate image graphics. Vectors mostly use points and each of these points has a defined position on the X and Y axes of the work plane. Unlike raster graphics they do not rely on pixels meaning you can scale them to any size without loss of information. However, the amount of detail a vector can contain is limited compared to a raster graphic.

Raster and Vector are just overarching graphic formats that include a larger selection of formats that have different functions, as well as advantages and disadvantages of using them.

Raster

JPEG

(Joint Photographic Experts Group) A raster file that is the most commonly used format. It's compressed sizes load quickly and work well for both print and digital graphics. The only downside is that they do not support transparency, and lose quality when they are compressed.

PNG

(Portable Network Graphics) Mostly used for web based graphics as they do not lose quality when compressed. PNGs also supports transparency.

GIF

(Graphic Interchange Format) Another format commonly found when working with web based graphics. They compress well and support transparency, but their main purpose is for animation. The main downside to using a GIF is its low colour spectrum.

TIFF

(Tagged Image File Format) Produces a higher quality image than a JPEG or PNG, but this does result in larger files and therefore longer loading times, meaning it tends to be used mostly with print-based graphics. TIFFs also support transparency.

PSD

(Adobe Photoshop Document) A working file type that opens in Photoshop. You would never see a PSD embedded in a website as they are not compressed, and it isn't always a good idea to embed them in your print artwork due to their large file size.

Vector

EPS

(Encapsulated PostScript) EPS files are the most common vector format as they are supported by most programs. They can be extremely versatile but normally aren’t embedded in web graphics as they can have rendering issues.

SVG

(Scalable Vector Graphics) An XML-based vector image that is more basic than an EPS but does not suffer from the same rendering issues, meaning it is commonly used when embedding vector graphic in websites.

AI

(Adobe Illustrator Document) A working file type that opens in Illustrator. Like a PSD it is not compressed, and an AI file can’t be embedded on the web.

Converting between Raster and Vector formats

Is it possible to convert a vector format to a raster? Yes, when converting from vector to raster it is relatively easy.

Is it possible to convert a raster to a vector? No... ish. Depending on the detail and quality of graphic you want to convert from a raster to a vector, you CANNOT convert a raster to a vector. The higher the quality and more simple the graphic the easier it is to convert, i.e. a flat colour icon. Anything more than this will result in very distorted and ugly looking graphics. So it is normally never recommended to convert raster graphics into vectors - instead, ‘redraw’ the graphic from scratch.

Next time we will be looking at the different colour formats available with these graphic file types, so stay tuned to the SpotDev Blog!