.png, .ai, .tiff?

Image file types can seem like a mysterious code to crack if you’re unfamiliar with the terminology.

It is important to create or request the correct file type so that your graphics or imagery come out exactly as you intended. Using the wrong type can be costly, cause quality issues or delays in production.

Every graphic or image you see online and in print originally came from an image file. These files come with their own advantages and disadvantages. Before we dive into each specific type its useful to understand the category they fall into.

Raster

Images that are made from a grid of pixels. Each pixel is assigned a specific single colour.

Advantages
Keeps tone, blend and colour gradiations
Can work with almost any application

Disadvantages
Enlarging stretches the pixels resulting in a blurry image
Higher detail equals large file sizes

Used for
Photography
Web graphics
Graphics with shades, gradients and shadows

Common raster file types

.jpg
Digital and print photography
E.g. Social posts, banners, profile pictures

.png
Small digital graphics
Limited colours
Transparent backgrounds
E.g. Charts, diagrams, logos, icons

.gif
Small and simple digital graphics
E.g. Ad banners, simple charts, buttons, animations

.tif
High quality photography files
Used for printing and editing

Vector

Images that are composed of paths with points. Lines, squares, arcs and curves create simple or complex images.

Advantages
Easily change size or scale with no loss in quality

Disadvantages
Best-suited for designs that use simple or solid colours

Used for
Logos
Illustrations
Technical drawings
Graphic design

Common vector file types

.AI
Vector source file
Can only be created or edited with Adobe Illustrator

.EPS
Export file usually from Adobe Illustrator
Used for a single design element e.g. Logos and icons

.PDF
Export file
Universally used by printers
Easily exchanged and displayed across platforms

.SVG
Used for web
Can be indexed, searched and scripted

Find out more about file types and our design process on our website hexstud.io