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

Working with graphic designers doesn't need to be hard. I'm gonna show you how to pick the right file for the occasion and make your designer happy!

Category

Graphic Design

Date

June 3, 2021

A split image with a pixelated word RASTER written over a photograph. On the other side VECTOR is written in pink on a blue background.
A split image with a pixelated word RASTER written over a photograph. On the other side VECTOR is written in pink on a blue background.

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
a photograph of Newcastle Ocean Baths front signage, including two people walking in opposite directions
Newcastle Ocean Baths - Web ready JPG

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
Snapper Studio logo in purple, in a PNG file format
Snapper Studio Logo - Transparent PNG File

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
animated GIFS in a line, the first one reads flash and repeats in yellow, pink and blue. The second is in the shape of a polaroid and is shaken left to right. The third is an animated box brownie camera with the words brand hunter club added. The fourth reads say cheese, cheese is then crossed out and replaced with yeah baby.
Social Media GIFS

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)

A split image with a pixelated word RASTER written over a photograph. On the other side VECTOR is written in pink on a blue background.

Subscribe today!

Get my entertaining, weekly branding tips straight to your inbox, with a no sh*t guarantee!

Subscribe

⚡️ FREE DOWNLOAD ⚡️

Uncover how to supercharge your brand and spark conversations with your ideal customers using feelings.

Take the feelings quiz

Explore other articles

Read enough?

A split image with a pixelated word RASTER written over a photograph. On the other side VECTOR is written in pink on a blue background.