fbpx

File Types: A Comprehensive Guide

Share

Do you ever find yourself overwhelmed by the sheer number of file types out there, wondering which one to pick? Don’t fret! I’m here to lend a hand with this user-friendly guide that’ll unravel the common file types and shed light on what each of them is best suited for.

Before diving into file formats, let’s start by clarifying some key definitions that will make it much easier to grasp the distinctions between various image types.

Bitmap vs Vector

Bitmaps (aka Raster images) are made up of tiny pixels and each pixel carries specific colour information. Put together they make up photographs or other complex visuals, and while great for these mediums, bitmaps can lose quality when resizing and scaling to large sizes.

Vector images use mathematical equations to define shapes and lines, this allows them to be infinitely scalable without any loss in quality. You can think of them as a set of precise instructions for drawing, making them perfect for logos, icons and certain graphics you want looking sharp and clear at any size.

Demystifying File Types

What is DPI or PPI?

DPI (Dots per inch) is a measurement used primarily for printing. It indicates the number of tiny ink dots a printer can squeeze into a one-inch space, this determines the print quality and sharpness. Higher DPI means crisper prints and higher file sizes. When printing anything you want your photos or images to have a high resolution, like 300 DPI, this ensures a high quality result.

PPI (Pixels per inch) is the digital equivalent of DPI. It measures the density of pixels within an inch, impacting how clear and detailed your images appear on your computer or phone screen. All images on the web display at 72 PPI, a lower resolution than print. This means having an image of 300 PPI on your website will not improve the clearness or quality, but will slow down your website due to the large file size.

What are RGB, CMYK and HEX?

CMYK (Cyan, Magenta, Yellow and Key {Black}) is the colour mode for print. These four inks mixed together create a wide spectrum of colours. Perfect for magazines, brochures, photographs and more. When sending anything to print you want to be sure that all artwork or images are CMYK, if a RGB image is sent to print you will likely receive an unpleasant surprise, for example colours may be wildly incorrect and less vibrant.

RGB (Red, Green and Blue) is the colour mode for the web. It relies on blending these 3 colours at varying intensities to produce a broad range of hues. RGB is for all digital materials, no matter the type of screen or device. If you accidentally use a CMYK image on your website you will find out quickly as the colours are distorted, possibly too bright or too dull.

Hex Code (Hexadecimal code) is like a secret colour language, specifically used for digital design. It is a coding system combining letters and numbers to specify a particular colour’s intensity and hue. If you have ever used a colour picker you may have come across a section with # symbol with a blank space, this is where you can enter a Hex code. For example #FFFFFF equals white.

PANTONEs are a standardised colour matching system used in various industries, such as printing and graphic design. Pantones guides allow you to view available colours and their unique codes, each colour has specific ink measurements to ensure accurate colour mixing everytime. Using Pantones ensures accuracy and uniformity over projects, products and branding.

FILE TYPES

JPEG (Joint Photographic Experts Group)
A widely used format for digital images/photographs due to its compression capabilities, which balance file size and quality. JPEG compression works best when it comes to photographs, and is a go-to choice for the web, where optimising for responsive design is a priority, thanks to its efficient compression. JPEGs are not suitable for line drawings, text or icons. When you want crisp edges or sharp contrasts, JPEGs will often leave behind noticeable quirks, such as jagged lines or visible pixelation.

PNG (Portable Network Graphics)
A popular choice for web graphics and images, due to the transparency options. Unlike JPEG, PNG uses lossless compression, this preserves image quality but potentially leads to larger file sizes. There are ways around higher file sizes by using PNG specific image compressions (such as tinypng.com). PNGs can be used for images, photos, lines, text or icons with very little noticeable faults. And with the added option of transparent backgrounds it is a good choice for digital images.

TIFF (Tagged Image File Format)
A lossless format, most used for high-quality print graphics and photographs, it retains all image details and information but creates very large files. You have most likely come across a TIFF and didn’t know what to do with it, unless you are a photographer, printer or need to reproduce images at very large sizes (like a billboard) I recommend leaving them out of your repertoire.

GIF (Graphics Interchange Format)
The GIF was introduced back in 1987 and is still going, with a big resurgence with the animated meme. GIFs support limited colour palettes so they are not great for photographs or complex images but they do allow for animation. If you have a simple graphic that you want to add some movement to a GIF could be an option for you.

SVG (Scalable Vector Graphics)
A favourite for displaying web graphics and icons, SVGs can be edited with code or with a vector graphics software (such as Adobe Illustrator). These useful files can be rendered at any size without loss of quality. I highly recommend using SVG files for web on graphics such as logos, text and icons.

PDF (Portable Document Folder)
These are the most common document files you will likely come across. PDFs can be created, edited and viewed in many different programs, not just Adobe software. These files can contain a wide range of content from text, graphics, images and even interactive elements such as forms. If you need fillable forms for your business, I recommend using a PDF, data can be input without disrupting the document format, unlike forms created in Microsoft Word for example.

AI (Adobe Illustrator)
Created and editable in Adobe Illustrator, AI files are vector graphics. These files store information about paths, colours and shapes that allow for easy scalability without loss

of quality. Adobe Illustrator is an industry standard tool that many graphic designers use to create logos, typography, illustrations, icons, and drawings.

EPS (Encapsulated PostScript)
Like an AI file, EPS are vector based, their advantage over an AI file is that many programs can open and edit an EPS file whereas only Adobe Illustrator can open an AI file.

PSD (Photoshop Document)
You have surely heard of Photoshop, it is one of the most powerful image editing and manipulation tools out there. PSD files are the native files for Adobe Photoshop, they can store layers, effects, adjustments and more. They are essential for non-destructive editing and maintaining design flexibility. If you are using PSD files make sure you have plenty of data storage, these files can get in the gigabytes.

INDD (InDesign Document)
If you are into publication and layout design then you have likely come across Adobe InDesign. From magazines, brochures or digital ads, INDD files will store all format information, character and paragraph styles, page contents and link to files such as JPEGs, PNGs, PSDs and AIs.