Regardless of what you do in your day job, just being a human these days (!) requires us to know a little bit about file types - images from our holidays, personalised presents for family, documents to send at work & social media accounts to keep looking fancy - for all of these it really helps if we know a little bit about file types and how to use them

You’re probably pretty familiar with certain file names - JPeg, PDF, even PNG are all in our lexicon these days. But unless you’re working as a designer and using a variety of file types day in day out you probably don’t know how these files are different, and which to choose when.

Well no more my friend ! This simple guide has you covered - minimal jargon, maximum simplicity and everything you need to know about file types and how to use them.

What file types are there and how should you choose the right one for your images?

Vector vs Raster files

Before we dig into each different file type and how it’s used let’s answer the question

“What is the difference between a vector and raster file type?”

Raster File Types

Nothing to do with Bob Marley… (forgive me the Dad joke - I couldn’t resist!) A Raster file type or file format is the word we use for file that is created out of pixels. A pixel is a small block of colour that when many of them are all viewed together create an image. Raster files can display colour gradients and fine detail such as in photographs (which are almost always PNG or JPeg file types), however if they are enlarged too much they can become “pixelated” i.e. we see the individual pixels that make up the image - I’m sure you’ve been there !

What are the benefits of raster files?

Show fine detail, colour gradients and texture well
Lossy raster files (more on this later) can be compressed to be relatively small
Almost any programme can work with commonly used raster file types

Downsides of raster files

Become grainy, pixelated or blurry when enlarged too much
Enlarging them to maintain quality can result in very large file sizes

Examples of raster files

Vector File Types

A vector file type or file format is a file that is stored as mathematical equations. These are images created using proportional formulae as opposed to pixels, and therefore are more reliable if resized.

Benefits of vector files

They can be resized as large as you like or as small as you like without losing quality
They can often be easily converted into other file types to be used in different contexts
They maintain fantastic quality and detail when used for “flat” or line images or text
The fact that they are made from mathematical formulae can mean they are “lighter” i.e. take up less memory space compared to the equivalent raster file

Downsides of vector files

They don’t capture fine detail such as that in photographs which contain gradients and texture
How they appear can vary dramatically depending on the application that is viewing them

Examples of vector files

Now we have the basics out of the way, (and you’re humming “No Woman No Cry”) I’m going to explain in some more detail the most commonly used file types for images, including logos, icons and photos and some of the key things to consider when choosing which image type is right for what you’re seeking to do.

An overview of Raster File types - JPEG, PNG & GIF

What is a JPEG & how should you use it?

A JPEG is the most universally used file type - originally developed for digital photographs.

It’s a type of raster file meaning that it’s composed of pixels. It’s also a “lossy” file which means that only the necessary information is saved, and the rest is discarded which allows the file size to be relatively small (also known as being “compressed”). This compression has the downside of meaning that the image will be lower quality than the original (such as a PSD (photoshop), or RAW file) and so is not the best to use for large scale printing like signage as it is likely to become pixelated.

JPEG files are great to use electronically for images with a solid background, such as photographs or social media graphics. Because they are a raster file type, however, they will lose quality (or become pixelated) if enlarged too much, even on web. To avoid this ensure you use a minimum of 72 ppi (pixels per inch) for web, and 300ppi for print.

When to use a jpeg

Website photographs (want gorgeous pictures for your webiste like mine? Check out Moyo studio *, they have gorgeous images and currently have their creatives bundle at a huge discount! *yes - that’s an affiliate link, I’m their biggest fan!
Social media posts
Photographs to print and frame at home

Read this for more about image sizes for Squarespace

What is a PNG & how should you use it?

PNGs are another commonly used form of raster image and are interpreted by most modern browsers meaning they’re great to use on websites. Similarly to JPEG files they are “lossy” meaning they have been compressed and therefore give us relatively good quality for a small file size.

The main difference between PNGs and JPEGs is that PNG images can be saved with a transparent background making them fantastic for logos and icons, or any other website imagery that would look smarter without a block colour background.

WHEN TO USE A PNG

Logos (looking for a new logo? Get in touch!)
Website on-page icons/ imagery
Favicons/ browser icons
Any other image needing a transparent background

What is a GIF and how should you use it?

GIF files, similar to JPEG and PNG file types are lossy, raster files. They have the difference however of being extremely effective for short animated sequences or videos, using less space than MP4s and adding dynamic interest on websites and on social media.

GIF files can also be used for static images, however I don’t recommend this as they are less effective than PNGs and JPEGs.

When to use a GIF

Short animated sequences on websites, social media or 1:1 communication such as email or messenger
Short sound-less videos

Need to resize your GIF, or another image for your site - I’ve got you covered in this blog.

What is a PSD (or photoshop file) and how should you use it?

A PSD file is the internal file storage on Photoshop which saves more detail and information than can be used to manipulate and edit the image. Generally Adobe Photoshop is required to open photoshop files.

Once an images has finished being edited in photoshop it should be exported into another file type such as JPEG or PNG before it’s used.

When to use a PSD file

Editing or manipulating photographs
Creating social media graphics or mock ups

Vector file types - PDF, SVG & AI (Adobe Illustrator)

What is a PDF file and how should you use it?

A PDF file is a universal standard file format used to view static information (text and images) both on web and in print. It can host vector and raster images - for example if you have an adobe InDesign (or even microsoft word) document which you export into PDF, the text will be saved in a text format, any vector images will be saved in their vector format and any JPEG photographs added will be saved in raster form.

You do not need any special software to view a PDF, and they are compressed files saved at small file sizes so they’re great for digital downloads, and for documents to print.

Common uses for PDF files

Digital downloads (e.g. instruction booklet)
Documents for print (e.g. brochures)
Business cards (Looking for some fancy new business cards? Get in touch!)

What is an SVG file and how should you use it?

An SVG is a series of letters and numbers that describes images consisting of raster, vector and text. As it is a vector file it’s resolution independent, which means, that unlike a raster file it will not pixelate or lose quality if enlarged and it maintains a relatively small file size. SVGs are not yet supported by all browsers, and because the information in an SVG file comes from its source information it can display elements (for example text) differently depending on what application it’s being viewed from. Not all web design platforms natively support SVG files.

Common uses for SVG files

Logos or icons used on website page design

What is an AI (adobe illustrator) file and how should you use it?

An Adobe Illustrator or AI file is the editable version of the illustrator document that was used to create an original logo, icon or illustration. It is a vector file type, and allows a huge amount of flexibility to edit and manipulate information. AI files are large as they have not been compressed and hold all of the information required to manipulate and edit the file.

Similarly to photoshop, once an images has finished being edited in adobe illustrator it should be exported into another file type such as, PDF, SVG JPEG or PNG before it’s used.

Adobe illustrator is often the programme used by graphic designers to create logos, illustrations or iconography that is then provided to the client in JPEG, PNG, PDF and sometimes SVG file formats. Make sure to ask your designer what file types they will provide you with and if they will also provide you with the “source” files (these are what you will need if you need to use your logo or other imagery in various contexts, however they’re not always provided as standard).

Check out the other most important questions to ask your designer

You made it - you’re a file type expert!

So there you have it - the difference between vector and raster file types, an overview of each and how to use them in your business, or just as a “human” living your life in this digital age! Go forth and impress your designer friends with your new graphic design acronyms!

Blog