Design File Breakdowns | Part 2

In Case you missed it, check out File Breakdown Part 1, so you have the lay of the land before jumping in!

Let’s dive right in and start breaking down what different file types are, so you know what you should be saving and sending clients.

JPEG (Joint Photographic Experts Group)

This is one of the most widely used formats online and is probably what your photo files are. You can use these online and in print because these can be downloaded quickly at low-quality or high-quality, depending on the weight of the file. However, as a raster image, these do have an ultimate limit of how large they can get – and are considered lossy.

TIFF (Tagged Image File Format)

Best used in photography and desktop publishing, these contain extremely high quality, large images that are lossless. These files are what you’ll typically get from a scanner, and are best optimized for print as they’re designed to preserve quality. 

EPS (Encapsulated PostScript File) 

An EPS file can contain text, raster images, and vector images — and has the benefit of being design application friendly. An EPS file will always appear at the correct resolution and is perfect for sending vector logos to a client, designer, or a printer. If using the design for online purposes, export the file as a .jpg, .png, or .gif. 

SVG (Scalable Vector Graphics)

SVGs generate crisp graphics at any scale, are optimized for search engines, programmable, often smaller than other formats, and capable of animations. In short, they’re perfect for the web because no matter the size, graphics look great. The one caveat is that SVG files are not meant for photo images — only graphics. But! SVG files can be opened in multiple applications such as graphic editing programs as well as text editors, making it super flexible. More and more web designers are turning to SVG files.  

PDF (Portable Document Format File) 

At this point, just about everyone knows what a PDF is! It’s a great way to share graphics, files, and documents over email, can easily be downloaded or printed, and makes it so a file looks the same regardless of whether it’s being viewed on a Mac or a PC. A PDF will include data such as vector paths, original image files, and remain text editable as needed, and it can compress images so the file takes up far less space than it would in a native Adobe Illustrator or Photoshop file.

GIF (Graphics Interchange Format) 

There remains a great debate over how to pronounce gif – do you say it like “I’ll be back in a jiff!” Or do you say it like, “I’ve got a gift” without the t? At Jelly, we’re evenly split. Most commonly seen in memes these days, a GIF file is an animated raster image — not a video file — that is used online and in digital formats such as banner ads and email images. The main benefit to GIFs is that they are small. The tradeoff is that they’re limited to the number of colors that can be included, making for a somewhat flat image. 

PNG (Portable Network Graphics)

These are kind of king when it comes to digital image formats. They have built-in transparency, which means if you wanted to slap that baby onto another image or different background, you can. They can shrink to incredibly tiny sizes, making them perfect for web graphics – no more lag time in loading images! And they are lossless file types, which means they have zero degradation of the image itself. But remember – these are meant to be used for web purposes only as they do best in RGB format. 

Go forth and design, young Padawan. (And save it in the right file type now that you know what to use when!) 

Resources:

PIN ME!

Design 101, Resources

November 18, 2021