Digital File Formats

As illustrators we use a few digital file formats in the course of the work we produce, and even though knowing about them is important, we tend to take them for granted. Especially when the software we are using offers up convenient default options for formatting and saving our files.

The Basics of File Extensions

Firstly, it is important to know what a file extension is. A file “name” extension is the suffix that is attached to a filename. For instance, My Illustration.tif, where “My Illustration” is the file name and “.tif” is the extension. The extension identifies the type of file I have saved. The important thing to note is that the file extension is the code that a software program will use to recognize and open the file. And in the case of the .tif extension, there are many software applications that can recognize and open a .tif file.

File extensions can be application specific, cross-program, or cross-platform.  Since each software application usually has its own file extension, there are tens of thousands of file extensions patented. Nowadays, the file extensions suffix is automatically attached to the file name. This is not only essential for a software program to recognize the file, but it is also very helpful for a user. Back in the day suffixes weren’t displayed, so one often had to go to “File Info” to check the format. In the too much information category, the longest file name extension registered at this time is the 25 letter + dot “.bejeweled2deluxesavedgame”. This doesn’t help when the total length a file name including the extension can be is limited to 255 characters.

This post is going to highlight cross program image based file extensions such as .tiff, .eps,, etc.; rather than application native ones such as .AI (Adobe Illustrator) or .PSD (Adobe Photoshop Document) file formats. It is also going to focus on those that are most commonly used by illustrators.

The Reason for File Formats

In a nutshell, the purpose of a file format is to preserve the accuracy and appearance of a digital document for a desired context. That’s why it is very important to know the purpose, uses, and limitations that were designed into the various file formats to avoid usage mismatches or loss of data. For instance, saving a 24-bit RGB Adobe Photoshop document in a .gif format will reduce the number of colors from 16,777,216 down to 256, i.e., 24-bit down to 8-bit, which could have drastic consequences depending on the output requirements for the file.

The Formats

TIFF

TIFF stands for “Tagged Image File Format”.
.tif files can be raster or vector based images. .tif supports black-and-white, grayscale, index color (256 color), RGB, LAB, and CMYK images and offers excellent compression options including  LZW (Lempel-Ziv-Welch) lossless compression. A .tif file embeds an ICC color space profile, which means many applications can access .tif files. .tif files can be reopened and edited. A non-flattened Adobe Photoshop .tif file will save layers, adjustment layers, channels, paths, and transparencies, but programs that can read a .tif may not be able to read all of the these features. Presently, Photoshop supports 16, 24, and 32-bit depth images.

JPEG

JPEG stands for “Joint Photographic Experts Group”. The .jpg format operates strictly in the realm of raster imagery. .jpg produces lossy compression, which can result in a lessening of image quality. Vector graphic documents that are saved as .jpg files will be rasterized, resulting in a loss of their resolution independent scalability. There are two main reasons for using the .jpg format. The first use is to loose data. Now it sounds like this would be a bad thing, but in actuality, loosing data or shrinking a file can be very useful. For instance, you can create a high resolution illustration and retain an original file for many different uses. If one of those uses is to display that image on a website, you can compress the file by saving it in the .jpg format. The ,jpg format allows you to set the image quality, i.e., the image size, when you save your illustration, making it very small if needed. The second reason to use .jpg is that stores 24-bits per pixel, 16,777,216 colors for a realistic true color look. Most significantly, the .jpg format supports RGB, CMYK and grayscale color spaces.

JPEG low resolution color sample.

JPEG maximum resolution color sample.

EPS

EPS means “Encapsulated PostScript”. A format that was once quite popular, .eps encapsulates raster and vector image files in PostScript code. There are two main purposes for using an .eps format. One was to export an image that could be placed into another document, such as an illustration file that would be placed into a page layout program for final output. A placed .eps image retains its integrity; it can be scaled, but not resampled or content edited. .tif files can also be placed inside other documents and offer greater flexibility than .eps files. The other main purpose is to save a file in encapsulated PostScript to be output directly on a PostScript printer. .eps files can produce lossy compression in raster based applications like Photoshop.

PDF

PDF is the acronym for “Portable Document Format”.
Based on PostScript, it was developed by Adobe Systems as a highly compressed, efficient way to format documents for platform independent readability. Another hallmark of a .pdf file is that it will look the same on screen as it does in print. The .pdf format has several quality variations available. For instance, Photoshop offers “Press Quality”, for high quality output on an imagesetter or platesetter, however, the file is CMYK down sampled to 300ppi for efficiency. Another offering is “Smallest File Size” where the file is down sampled to low resolution RGB for use on the web. .pdf is useful for saving page layout files with single or multiple pages with images,  text, fonts, graphics, and multimedia content. .pdf has grown greatly in popularity due to it’s extreme usefulness for viewing documents on all sorts of platforms like the iPad, iPhone, etc.

GIF

GIF is the abbreviation for “Graphics Interchange Format”. It is a raster image format that maxes out at 8-bits per pixel RGB, or 256 colors. At one time the .gif format was the most popular format for saving files for use on web documents. Due to its limitation on colors it is not generally used for full color illustrations or photography, although .gif is an excellent format for certain purposes such as illustrated icons and graphics with limited color schemes.

GIF 256 color sample.

GIF 256 color sample with maximum pixel dithering.

PNG
PNG stands for “Portable Network Graphics”. Preceded by .gif, the .png format has all but replaced .gif for use by illustrators when converting images for the web. .png is known for lossless compression in a raster image format. Another advantage over .gif is that the .png format comes in two sizes; PNG-8 or 8-bit per pixel, and PNG-24 or 24-bit per pixel; 256 colors and 16,777,216 colors. PNG-24 can handle full color illustrations and photographs while PNG-8 is better suited for limited color images. One limitation of .png is that it only supports the RGB color space. For this reason .jpg is the preferred format for full color images, but .png may be a better choice for illustrations that use a limited color pallet or solid colors.

PNG-8 color sample, 256 colors.

PNG-24 color sample, 16,777,216 colors.

SVG
The SVG file type is primarily associated with “Scalable Vector Graphics”. SVG is a language for describing two-dimensional shapes, text, and embedded raster graphics. Although not a natively supported by Adobe, SVG images can be created and exported from Adobe Creative Suite programs, such as Illustrator for use on the web. SVG is ideal for interactive, data-driven, personalized graphics. It is widely supported by modern web browsers.

Best Usage Summary

.tif – For CMYK illustrations for commercial printing

.tif – For RGB/CMYK illustrations for high quality desktop output

.tif – For CMYK illustrations placed in other application files

.jpg – For RGB/CMYK full color raster illustrations for desktop output or web

.eps – For illustrations for output on a PostScript device

.pdf – For illustrations for emailing, digital display or desktop output for proofing

.png – For illustrations with limited color for the web (PNG-8)

.png – For full color illustrations for the web (PNG-24)

.svg – For two-dimensional vector graphics for the web

One Final Word

For archiving I recommend using the native application file format and .tif. As long as applications are updated to be upwardly compatible, the native file format will be best. I use the .tif format for insurance.