Raster, vector, PNG or SVG. How to pick the right file format.

We've all heard the saying, happy designer, happy life. Along with cake, picking the correct file to supply to a designer is the way to their heart. Unsure if you need a PNG, an EPS or an SVG? I'll show you how to pick the right one for the occasion.

On a more serious note, choosing the wrong one can damage your business image. And, if you pick the right file, it can even give your website a boost, which means that the Search Engine Results Page (SERP) rankings get a boost too.

As a bonus, when you work with a designer, your new understanding will ensure you get what you pay for, and your business image will always look delectable.

Let's get stuck in.

Raster vs Vector. What's the difference?

If you've ever enlarged a photograph, and it's ended up blurry and pixelated, it was likely a raster image. JPGs, PNGs and GIFs are made from set amounts of coloured pixels, which make up an image. These are raster files.

When you enlarge a raster file, it can't cope, pixels get stretched to fill empty pixels, and your computer decides which colours will fill the new space. Enlarging raster files blurs detail, distorts the pic and makes it look terrible.

Vector graphics are images created with mathematical formulas. You can scale them to whatever size you like. Without a negative impact. They consist of lines, points, curves, and angles. They're perfect for company logos, illustrations and web graphics.

Whenever a designer creates a new graphic from scratch, like a logo, they will probably draw it in a vector format as they offer the most flexibility in how they can use the images later.

Image file types and their uses

JPG / JPEG — Joint Photographics Experts Group

A 'lossy' format that is one of the best-known raster image formats. They display millions of colours, so they are perfect for real-life photographs.

But beware, each time you save, a JPG gets compressed even more, losing valuable data. While this reduces the image size, making it smaller to store and upload to the web, it can come at the expense of high-quality printing.

When to use a jpg

• If the image is a photograph
• If your image is full of colours or gradients

PNG — Portable Network Graphics

A simple but powerful 'lossless' format, meaning you won't lose any data if you save the image. Files can have transparency, and you can change the opacity, which gives you the option to layer graphics. They come in two varieties, PNG-8 & PNG-24.

PNG-8 contains up to 256 colours - making it an excellent choice for high contrast simple graphics, logos or screenshots. Fewer colours mean smaller files, so it's perfect for the web.

PNG-24 contain over 16 million colours! They are rich in colour and sharper than PNG-8. As a result, the size of the file is bigger. Causing page load speeds to increase, which is bad.

When to use a PNG

• If your image is for websites or email newsletters
• If your image needs to be semi or fully transparent
• If your graphics are line art - drawings/illustrations

GIF — Graphics Interchange Format

While JPGs and PNGs are great, neither offer the ability to support animated content. GIFs do but are limited to 256 colours. They are another lossless raster format.

When to use a GIF

• If you need to use an image online (websites or emails)
• If your image needs to be animated (possibly social media graphics)
• If your graphics are simple, small web icons

TIFF — Tagged Image File Format

The print industry standard they are a lossless raster file that supports layers. A user can open the file, edit/retouch it and preserve all the original data. These alterations are known as non-destructive. But because they contain all this data, the files can be enormous, making them unsuitable for online use.

When to use a TIFF

• If you need to be able to edit the image again
• If you are saving an image for print
  

PSD — Adobe Photoshop

Like TIFFs, these native Photoshop files support layers of raster and vector graphics. You could add a photo as a layer, overlay some vector shapes, and throw some vector text in another layer. Then pass this unflattened file to another Photoshop user, and they can add more.

PSD's are the building blocks for animations and graphics, but you need to save them as a JPG, PNG or GIF to use them online.

When to use a PSD

• If you're sharing a design with someone else who has Photoshop
• If you're creating animations and need to edit them in future
• If you're sending a file to print
• If you need to develop transparent print graphics, things like deep-etched objects for magazine layouts.
  

AI — Adobe Illustrator

These are files that only Adobe Illustrator users can open. They are for vector graphic creation. But, you can also include raster graphics. You can't use AI files on the web, but you can send them to print. You can also handily insert them into Photoshop, Adobe Indesign, or Microsoft Word.

When to use an AI

• If you want to share a vector file with another Adobe Illustrator user so they can edit it
• If you want the flexibility to be able to insert vector graphics into different software
• If you're sending artwork to print
  

EPS — Encapsulated Postscript

Like an AI file, they can contain vector and raster graphics and can be inserted into various programs. The most significant difference is you can open EPS' with Adobe Illustrator, Corel Draw, Inkscape or Affinity Designer, making them widely accessible. Once again, they are unsuited to use online, which has led to the development of new vector file formats like SVGs.

When to use an EPS

• If you want to share a vector file with another user so they can edit it
• If you want the flexibility to be able to insert vector graphics into different software
• If you're sending artwork to print
  

SVG — Scalable Vector Graphics

As responsive websites became the industry standard, there needed to be a match in vector file format. SVGs are an incredible answer. You can scale them to any screen size with no distortion.

Because SVGs are XML code-based, they can be output at tiny file sizes, making them super quick to load online, making search engines happy.

You can open them with Adobe Illustrator, Corel Draw, Inkscape or Affinity Designer. Making SVG an incredibly flexible vector format suitable for web use.

When to use an SVG

• If you are uploading graphics to your website - logos, icons, backgrounds, other graphics
• If your image needs to rescale to different sizes on your website.
  

PDFs — Portable Document Format

The multi-purpose PDF. It's suitable for use in print and online and can hold both raster and vector graphics. Many software options can open a PDF, from inbuilt options on your desktop operating system to smartphones and tablets to high-end options like Adobe Acrobat Pro.

When to use a PDF

• If you're sending a file to print
• If you're uploading a document online for people to be able to read, download or share.
  

Download our file format cheatsheet (PDF)

‍