Vector or Raster, PNG or EPS? How to Choose the Right File Format

While it may seem trivial, choosing the incorrect file format could be undermining your marketing campaign and devaluing your outward facing business image.

If you don't know your PNGs from your SVGs, there's no time like the present to learn!

There are a whole barrage of file formats, and using them in the correct way can have some neat perks like shortening website loading times and boosting Search Engine Result Page (SERP) rankings. Even if you work closely with a designer, having an understanding of this subject will ensure that the design that you’ve paid for always looks the best it can. Here, I'm going to cover some of the most popular image formats and their uses so that you know your PNGs from your SVGs and can use them with confidence in your work.

If you’re not working with graphics daily, chances are you’re not overly familiar with file formats and their different uses either–and that’s ok! 

Raster vs. vector: what’s the difference?

Have you ever tried to enlarge a photograph, only to find it gets distorted at a larger size? This type of image is known as a raster. Some common raster graphics file types include PNGs, GIFs and JPEGs. A raster image is made up of a fixed number of individual coloured pixels that, when viewed together, form a complete picture. The more pixels that the picture contains, the higher its resolution. When you enlarge a raster image, your computer 'guesses' the information that should be used to fill in the newly formed space. This is what causes it to look blurry, pixelated or distorted. 

Vector graphics use mathematically based points, lines, curves and shapes to create graphics. Due to the way that they are created, vector graphics can be infinitely stretched and resized without losing any image quality which makes them perfect for items like company logos. Vector graphics file types include Adobe Illustrator (AIs), SVGs and EPS’. Whenever a designer creates a new graphic from scratch, such as a logo, generally they will create it as a vector, because it provides more flexibility in how they can later use that image.

Common image file types and their uses

JPEGs

JPEGS (Joint Photographic Experts Group) are one of the best known raster image formats and what’s known as a ‘lossy’, which means that when you save the image, it partially discards some image data to compress the image. This reduces the image size, making it easier to distribute and store. JPEGs are suitable for use online and in print. 

So when should you use a jpeg? General rule of thumb is when:

• Your image is a photograph
• Your image has lots of complex colours and gradients
• You have no need for image transparency
• You have no need for animations

GIFs

GIFs (Graphics Interchange Format) are also raster files but are a lossless format, which means that you don’t lose any data information when you save your file like you do with JPEGs. The downside to GIFs is that they don’t have as rich a colour spectrum as jpegs, only using 256 colours, or 255 if you enable transparency. This can cause images to look ‘off colour’. 

Generally, GIFs should be used when:

• Your image is going to be used online (websites, email mailouts)
• You require your image to be animated
• Your image has only a few, solid colours (like small web icons or simple images)
• Your image contains hard edged shapes (like text or shape patterns)
• You require an image with a transparent background, i.e only the icon or logo showing, without a solid colour behind it.

PNGs

PNGs (Portable Network Graphics) come in two varieties- PNG-8 and PNG-24. Like GIFs, PNGs are a lossless format so you won’t lose any data when you compress your image. One differentiating feature of PNGs is alpha transparency. In essence, this means that their transparency is scalable, so you also have the option of creating a semi-transparent look for your image. One of the caveats of using alpha transparency is that it not supported by Internet Explorer 6, so your graphic may not display properly if your viewers are still using an old version of that browser.

PNG-8 is very similar to a GIF. It has a 256 colour format, but its file sizes are even smaller than GIFs, making them perfect for web use. A PNG-24 will create much larger file size, but can display over 16 million colours, creating a much richer and sharper image than GIFs and PNG-8s. Be very conscious of file size when using PNG-24, especially if you’re considering using it for web, as the large file sizes can slow your page loading time.

So when should you use a PNG?

• Your image is going to be used online (websites, email mailouts)
• You require a transparent background or a partially transparent background

SVGs

SVG (Scalable Vector Graphic) is, as its name suggests, a format for vector graphics. Whilst this file type is not as common as some of the others mentioned, we think it’s well worth knowing about. As responsive websites become the industry standard, SVGs are being used more and more as they allow web graphics to be re-scaled to any size screen without distortion.

The beauty of the oh so flexible SVG file is that it can be compressed to very small sizes, saving space on servers and reducing page loading times. SVGs can be used for any vector file, whether it’s a website background, icon or logo, and can be created in a program such as Adobe Illustrator, Corel Draw or Inkscape.

SVGs should be used when:

• You are uploading any vector image to your website
• You are uploading your company logo to your website
• Your image needs to flawlessly re-scale to various sizes

If you’re looking for some further reading about SVGs, this article from Web Designer Depot is a great resource.

AI

The default file output of Adobe Illustrator is an AI file. This file format is often used to share vector graphics between users of this program. Sharing an AI file allows access to an editable file, so the user can make edits to the document if they like, but the recipient must have Adobe Illustrator to be able to open the file. While AI files are never used for web, they may be given directly to a printer, especially if you want them to be able to make small adjustments to your file in the printing process.

AI files should be used when:

• You want to share the vector file you have created with someone else who also has Adobe Illustrator
• You are sending a file to print
• You want the recipient to be able to edit the file, or don’t mind if they have the capacity to edit it

PSD

PSD is the native file format for Photoshop and is often used for editing raster files, such as photographs, but also supports the insertion of vector graphics. Unless the layers are flattened by the creator, PSD files are editable by any user who has Photoshop. PSD files should be converted to a JPEG, PNG or GIF in order to upload them online.

PSD files can be used when:

• Sharing a design with someone who also has Adobe Photoshop
• Sending a file to the printer

TIFF

TIFFs (Tagged Image File Format) are used as standard in the print industry and are often used to edit and store raster images such as photographs. Due to their lossless format TIFFs are often preferred over JPEGs for saving working files because they can be saved and re-saved without losing image quality. Unlike JPEGs, TIFF supports multiple layers of  images within one file, and due to the amount of information they contain, their file sizes are very large. TIFFs are not suitable for online use but are great for print projects. 

When is a TIFF a good idea?

• Whenever you are working on a raster image and you want to be able to make changes to it at a later date.
• When you are saving a raster file for use within a print project.

EPS

EPS stands for ‘Encapsulated PostScript’ and, similar to the AI file, is primarily used for sharing vector files. Unlike AI files, EPS’ can be opened and edited with a range of vector software programs including Adobe Illustrator, Corel Draw or Inkscape. It can also be inserted as an image into other programs such as Photoshop, InDesign and Microsoft Word, but is not made for online use. While it is still a useful file in many situations and industries, use of the EPS file has considerably decreased in recent years in favour of other vector file formats. 

When is it appropriate to use an EPS file?

• When you want to share an editable, vector file with someone using vector editing software other than Illustrator.
• You are sharing a vector file with someone who wants the flexibility of embedding the file in various software applications
• When a printer, client or collaborator specifically asks for an EPS file

PDF

A PDF (Portable Document Format) can either contain raster or vector images or both, depending on how it is created.  Suitable for both print and online use, PDFs can be opened and used across a wide range of software applications, making them extremely flexible and widely used. If a PDF is created in Illustrator, the user can also choose to preserve Illustrator’s editing capabilities so that anyone can edit the original vector file, similar to an AI or EPS.

You can use a PDF when:

• Sending a file to print (an alternative to AI, PSD or EPS)
• Uploading a document online for people to be able to read, download or share
• Sharing a vector file with someone who doesn’t have software that supports vector illustration

Now that you know more about these file formats, I hope you’ve earmarked a few to try out soon!