Ever been asked for a PNG, TIFF, or SVG file and have no idea what you’re being asked for? Odds are you probably aren’t a designer and wouldn’t know the difference, but wouldn’t it be nice if you did? File extensions are confusing to say the least, but knowing what file type to send to your printer, what working file your designer needs, and what type of image your website developer is asking for, can not only streamline your work process, but will produce better quality output.
Keep reading for a rundown of basic web and print terminology, as well as the most common file types and what each one is optimized for.
Before we dive into file types let’s look at the difference between raster and vector files.
Raster files, including JPG and PNG, are formed by a grid of pixels that are fixed in size and proportion and are probably what you will most commonly deal with. This means that if you were to resize a raster image, you would be stretching the pixels resulting in a blurry image. That’s why it’s important to save raster files in the specific dimensions you’ll be using them for.
Vector files on the other hand, like SVG, ESP, and AI files, are made specifically to be scaled. Vector images are made up of formulas rather than pixels, allowing them to be scaled without losing quality. This makes them ideal for graphics like logos or icons that are constantly being resized to fit different applications.
One more set of terms you should know before looking at file types (I promise they’re coming in the next section!), is RGB and CMYK colour spaces.
RGB stands for Red, Green, Blue, which are the primary colours of light used in screens like monitors, phones and cameras. This colour space is optimized for web applications.
CMYK on the other hand is made up of the primary colours of pigment, or ink, being Cyan, Magenta, Yellow, and Black (Key). Black is said to be represented by a “K,” because it is the “Key Colour,” but really it’s because “B” was already taken by blue in the RGB colour space. Anyway, this is why if you’ve ever changed the ink in a printer there are four cartridges each with one of these colours, making this colour space best for print.
First things first, JPEG and JPG are the same thing. Windows used to have a three-character limit for file extensions, and so .jpeg was shortened to .jpg, but today you can use either and the format will be the same.
JPGs can be found almost anywhere including the web and print, and they are best known for their ability to compress the quality of an image as it gets smaller, making them great for web and print if saved at the right size to avoid stretching pixels.
The main difference between JPGs and PNGs is that PNGs can have a transparent background, and don’t decrease in quality when you scale them down, making images a lot more crisp, but also increasing the file size. This makes PNGs optimal for digital art like logos and icons on web applications. It is also important to note that PNGs should not be used for print as they do not support CMYK colours.
TIFF files are best known for maintaining their original quality no matter how much you manipulate the file. As a result, these files are very large, and can drastically slow down web page load time. This is not great for user experience, as 40% of people are likely to abandon your site if it takes more than two seconds to load a page. With that in mind, this file type should only be used for print.
Over the past few years, GIFs have taken the world by storm with websites like Giphy making it easy for anyone to save clips from their favourite pop culture references and send them to friends.
You’ve probably noticed that GIFs are not the best quality though, and it’s their lack of quality that allows them to be so small in file size that you can send them via text or use them as stickers on Instagram.
This file type takes a series of raster images and plays them in a sequence on loop, and the reason GIFs can be so small in file size is because they are limited to 256 colours. This may seem like a decent amount of colours, but it’s nothing compared to a PNG or JPG which can support upwards of 16 million colours. And of course, these colours are in the RGB colour space – unfortunately technology, as it stands, does not let us print GIFs, yet.
A PSD file is simply a working Adobe Photoshop file that uses layers to edit images. This file type is used mainly as a working document to edit images, rather than being the final format of the image. Using Photoshop, you can save a PSD file as any of the above mentioned raster images.
If that wasn’t enough raster file types for you, you can read up on a bonus photography-specific file type called RAW in this blog post!
PDFs were made to be a universal file for displaying documents and holding vectors that can be viewed anywhere, and by anyone. This file type is often used as the final output of a document or design created in other software using other file types.
For example, if you had a designer make a poster, it could include raster images edited in Photoshop that are then brought into Illustrator and combined with vector graphics, then exported as a PDF to send as a standard file to a printer. The printer will be able to open the file on a number of different software, visually nothing in the document will change and they will not need to relink any assets because things like images and fonts are embedded rather than linked.
It’s right in the name, this file format is made to hold graphics that often need to be scaled to different sizes. SVGs are meant to be a means of sharing vector assets, like a logo, so that they can be brought into design software for use in a project, or can be used directly as a graphic on web applications. This format is best suited for web use because it can be compressed to smaller file sizes, but should not be used for print.
Check out our blog post on asset management using Figma, to see how to easily share brand assets like logos as SVG files.
This file type is optimized for printing high-resolution graphics, and is a universal format in which vector graphics can be opened and edited using almost any design software. This format is ideal for sending individual design assets like a logo to a designer or printer without having to worry about quality loss.
Last, but definitely not least is Adobe Illustrator files, my personal favourite file type! AI files are the most common vector graphic file type used among designers, and for good reason. This format is most often used as a working file sent between designers to edit vector graphics or create designs from scratch, which are then saved as one of the above file types to be sent off the respective recipient whether it be a web developer or printer.
AI files are mainly vector-based but can hold raster images through linking or embedding. Much like how Photoshop can create all types of raster images, Illustrator can create all of the above vector file types. Not only that, but it can also export vector graphics to any of the listed raster image file types (with the exception of GIF), making it one of the most comprehensive tools and file types on this list. Its versatility as a file type and tool makes it a great option for creating both web and print graphics.
That brings us to the end of our list, you made it!
The next time your printer or designer asks for a file, you’ll be sure to impress. But, if after all that you’ve decided that you want nothing to do with file types, we can help! Learn more about how we can help you with your website and social media accounts, or get in touch if you have any questions!7