Design Tips:
File Formats Explained
Image File Types: The basics
You’ve finally finished your project, you go to save your file, and suddenly you’re confronted with over a dozen possible image file types to choose from. But don’t worry, there are only a handful of image formats that really matter.
There wouldn’t be that many file types to choose from if they didn’t each serve a particular purpose. But a lot of them are specialized file types that you’ll never use, especially when designing for print. This resource will help you figure out the image file types that matter most.
Raster vs. Vector images
To fully understand the difference between the image file types available to you, you first have to know the difference between raster file formats and vector file formats
Raster Images
Raster images are created with pixels, and can be anything from simple illustrations to complex images like photographs. Because raster images are made from a fixed set of pixels, they experience a loss of quality whenever resized, especially when you’re trying to make them larger. Raster images are typically used as the final product—something that is ready to be sent to the printer or published online.
Vector Images
Vector images aren’t exactly images at all—they’re like mathematical formulas that communicate directly with your computer to tell it what kind of shapes to render. Because of this, vector images can easily be changed or resized without any loss in quality, since the formula simply adjusts to render a new illustration at the desired size.
Vectors are typically used to create illustrations, text and logos, but they can’t handle complex images such as photographs. Vectors are typically used as working files (which are later converted to raster images for the web), but they can also be used as print-ready artwork.
Using Vector & Raster Images
Know your file types
Classifying the common file types you see in print and web design takes more than just dividing them up between raster and vector images. Both raster and vector file types are blanket terms that envelope a wide spectrum of different file types with different functions, purposes, benefits, advantages and disadvantages.
Raster formats
PSD
PSD is Adobe Photoshop’s native format, meaning files of this type can be edited non-destructively in Photoshop. You’d never embed a PSD on a web page and it’s not a great choice for sending clients previews of your design (unless they’re familiar with Photoshop), but it’s a great format for sending to printers and fellow designers.
To reduce file size, you’re best off flattening a PSD file and converting it to CMYK to use in print documents. But always remember to save a layered version of your PSD for future editing.
JPEG
The JPEG (Joint Photographic Experts Group) file format uses lossy compression, which is great when you want to reduce image file size, but isn’t high enough quality to look good in print and definitely shouldn’t be used for a logo design.
Because of this low file size, JPEGs, (also known as JPGs) are primarily used in web design, as the format allows web pages to load faster. The JPEG format is also used heavily in digital photography, since the loss in quality isn’t as noticeable and the low file size means being able to store more photographs on a memory card or hard drive.
Thanks to this, JPEG has become somewhat of a “default” file type for those outside of the design industry. In fact, you’ll probably run into clients with tragically grainy JPEG logos or those who prefer to work exclusively in this file format because it’s familiar to them.
Do your best to steer them towards other file formats better suited for their needs.
PNG
The PNG ( Portable Network Graphics) format combines qualities of JPG and GIF, but it’s also in a league of its own. Like JPGs, PNGs are great for detailed images like photographs, but they’re also capable of producing higher quality images than JPG.
Like a GIF, PNG can include transparency, so it’s great for digital designers who want to use transparent elements but don’t want to sacrifice image quality. The biggest downside to files with a .PNG extension is that the high image quality comes at the price of image size, so too many of them can slow down a website’s load time.
PNG’s can also only be saved in RGB format, so they are not suitable for use in a print document. They’re best when used sparingly in a web environment on the elements that absolutely need better quality than a JPEG or GIF can handle (such as high resolution logos). PNG is also a raster image type, so you’ll lose some of that quality if you need to upsize your graphics.
GIF
The acronym stands for Graphics Interchange Format and it’s a file type used primarily in web design. The format supports up to 8 bits per pixel for each image, allowing a single image to reference its own palette of up to 256 different colors chosen from the 24-bit RGB color space. It also supports animations and allows a separate palette of up to 256 colors for each frame.
GIFs can also handle transparency and maintain a low file size. However, low is a relative term here—the more colors you use, the larger your GIF will be, which doesn’t really make it a good format for photography (unless you need it to be animated for some reason). Even then, you have to be aware of how many frames you’re adding and how big the canvas is, as both of these can contribute to high file size and slow load times.
TIFF
TIFF (Tagged Image File Format) is a lossless file format, which means nothing is lost when the file is saved and compressed. TIFFs also have the capacity to support layers.
For this reason, it’s common to see TIFF referred to as the “print-ready” image format, though many printers prefer to work with native file types such as AI and PSD.
The TIFF file format is big—too big to ever be used in web design. It’s likely to scare your less experienced clients, too, so be prepared to have copies of your design in formats that they’lll understand.
Vector formats
EPS
EPS (Encapsulated Postscript) is a standard vector file format—which means it’s basically just a bunch of formulas and numbers that create a vector illustration.
It’s an essential file format for any type of design element that might need to be resized, including logos. It’s also great for placing into InDesign print documents.
AI
The AI file type is like EPS’s Adobe-branded cousin—both are vector file types, but AI is Adobe Illustrator’s native format. Anytime you edit, save, or open an ongoing project in Illustrator, you’re working with an AI file.
An AI file can’t be embedded on the web and it’s not something you’d likely share with your client—it’s likely to make their head spin unless they’re a tech savvy Adobe geek. But it’s good for placing into InDesign print documents and sharing with your printer.
Other formats
Adobe’s PDF (Portable Document Format) file format is the best of both worlds—good for both digital and print distribution. It’s a file format that will please both your client and your printer, while also giving you the option to share directly with the audience as well.
PDFs may contain either raster or vector images, or even a bit of both. You’ll hardly ever embed a PDF directly on a website, but you can offer it as a downloadable file that can be read on any PDF reader.
It’s also a good file format for sending to your client as a preview of what their final design will look like. However, this only really works for book-shaped documents like brochures or pamphlets. For print designs that have to be cut and assembled (like presentation folders), you’re better off using a mockup template to show your clients what the final design will look like.