Picking the right graphic file type

Along with cake, picking the correct graphic file type to give to your graphic designer is the way to their heart. But how do you know which file they need? 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 brand image.

But, if you're making a website, picking the right one can boost your rankings for Search Engine Results Page (SERP).

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

Raster vs Vector files. What's the difference the graphic file types?

If you've ever enlarged a photo that ended up blurry, it was a raster image. You pixelated it. JPGs, PNGs, and GIFs are made from a set number of pixels to create an image.

Raster files

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

Raster files are JPGs, PNGs, GIFs, WebPs (newish file type) and AVIFs (very new file type).

Vector files

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 should draw it in vector format, as this format offers the most flexibility in using the images later.

Vectors are in the form of SVGs (perfect for the web), AI (Adobe Illustrators files) and EPS files.

Image file types and their uses

JPG / JPEG — Joint Photographics Experts Group

A 'lossy' format is one of the best-known raster image formats. It displays millions of colours, making it 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

When to use a PNG

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

Snapper Studio Logo - Transparent PNG File

GIF — Graphics Interchange Format

While JPGs and PNGs are great, neither can support animated content. GIFs do, but they are limited to 256 colours and are another lossless raster format. 

When to use a GIF

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

Social Media GIFS

TIFF — Tagged Image File Format

These print industry standard files are lossless raster files that support layers. A user can open the file, edit/retouch it and preserve all the original data. These alterations are known as non-destructive. However, 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 raster and vector graphics layers. 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 on to another Photoshop user, and they can add more. 

PSDS are the building blocks for animations and graphics, but you must save them as 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.

Connect with customers and grab the Emotional Branding Download.

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 AI files, EPS files can contain vector and raster graphics and be inserted into various programs. The most significant difference is that you can open EPS files with Adobe Illustrator, Corel Draw, Inkscape, or Affinity Designer, making them widely accessible. Once again, they are unsuitable for 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, web designers and developers needed a file format that matched the responsiveness. SVGs are an incredible answer. You can scale them to any screen size without distortion. 

Because SVGs are XML code-based, they can be output as tiny file sizes, making them super quick to load online, which makes 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 be scaled to different sizes on your website.

PDFs — Portable Document Format

The multi-purpose PDF. It's suitable for print and online use and can hold 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.
  

Bonus file types

As our attention spans sinks faster than a wedding ring in rough seas, we need new ways to create faster, more efficient websites. Luckily some clever people have done web designers and developers a massive favour.

They have battled the bloated JPG and PNG files for web graphics. A standard 2000px wide image that is compressed ready for a page can be 200kb, which is good, but... left us with pretty poor images. Then along waltzed WebP and AVIF.

WebP by Google & AVIF (AV1 Image File Format)

Google created a new raster form that's 26% smaller that PNG, and keeps more of the details in there. These files end up being closer to 120-140kb, savings that compound and create a really good speed boost. Which ironically will boost your SEO and make Google happy.

AVIF is on another level! It is ideal for websites, and creates files that are as small as 20kb.

Now we know not all of this is easy to achieve, and that you might want someone to take care of it all. We are always here to answer questions. Contact us today.