ClearRiver Advertising and Marketing

Graphics file formats demystified

By: Nathan Wilds

Not all graphics file formats are suitable for all purposes. Which is best? In general, some are optimized for printing and others for onscreen viewing. Each has its advantages and disadvantages, which I’ll discuss below.

I’m going to give you a simple overview of a few of the formats I see every day, some of which I actually use every day and some others not so much. I’ll try to keep this as basic as possible and avoid talking about all of the intricacies and exceptions, of which there are many. For example, some file formats contain both raster and vector info.

Unless you’re a graphics nerd like I am, you may be asking, “What the heck is raster and vector info?!?” Good question! I guess I should give you a quick look at the differences between raster-based formats and vector-based formats before diving into the file formats themselves.

Raster/Bitmap vs. Vector

	Raster/bitmap	Vector
How do they represent images?	With pixels (picture elements), each pixel is assigned a location and color (like coloring in the squares on graph paper to create your image)	With straight and curved lines defined by mathematical objects called vectors
What uses are they typically preferred for?	Photos and onscreen imagery	Logos and text that will be used in printed pieces
How are they affected if resized or if the resolution is changed?	Can lose detail and look jagged when enlarged onscreen or printed at a larger size than they were created for	Keep their crispness when printed or viewed at any size or resolution

 

 

Now lets look at the file formats used to save and exchange each of these types of graphics and why, for instance, a file with a .jpg extension is actually called a JPEG.

Raster/bitmap-based file formats

.jpg: This format, named after the Joint Photographic Experts Group (JPEG), is often used for photos, especially on the Web. JPEG files are small because they’re highly compressed to reduce transfer time, but the tradeoff is a loss of quality. JPEG doesn’t work well for images with text, large blocks of color or simple shapes because crisp lines will blur and colors can shift. JPEG also can’t be used for images with transparency. Each time a file is saved as a JPEG patterns or banding, not in the original image, can show up. I always make sure I save JPEG files from the original image, not from a previously saved JPEG.

.gif: Graphics Interchange Format (GIF) is used to display graphics and images on the Web. Like JPEG it’s compressed, but it’s not as effective as JPEG or PNG for displaying photos online. It’s also not suitable for pieces that will be commercially printed. GIF format can handle crude transparency (I’ll resist the temptation here to make a joke about Madonna’s wardrobe), but not the kind of smooth transparency that PNG excels at. Still a pretty common format, but already a dinosaur in my eyes.

.png: Portable Network Graphics (PNG) is my preference for onscreen and Web applications because it supports alpha channel transparency. Sounds like a feature of the “Star Trek” teleporter, but alpha channel transparency actually means transparent areas with soft edges. This makes PNG ideal for overlaying an image onto a colored background because you don’t get the offensive “white box” you get when you use JPEG in the same situation. Some older browsers don’t play nice with transparent PNGs, so exercise caution when using PNGs on the Web.

.psd: Photoshop document (PSD) is Photoshop's native format, so it supports all of the venerable image-editing program’s features (layers, transparency, vector text and shapes, etc.) and has very tight integration with other products made by Adobe, arguably the industry-standard software developer for print and web publishing products. (And if you wanna argue about it, you know where to find me!) This makes editing of images placed into layout much easier and faster than in the past. So whitening someone’s teeth just a smidgeon after the image is already in layout is a snap when using PSDs.

.tif: Tagged-Image File Format (TIFF, TIF) works well for any raster/bitmap image and is supported by almost all paint, image-editing and page-layout software, as well as most desktop scanners. Like PSD files, TIFF files are large (a feature they also have in common with the headache most people get when reading long blog posts about graphics file formats), maintain their quality and are most commonly used for high-resolution print applications.

Vector-based file formats

.ai: Adobe Illustrator (AI) files are used to create illustrations, logos, charts and all things vector based. These files can then be placed into or opened by almost any illustration or page-layout program, as well as many other graphics applications. AI can contain both vector and raster/bitmap graphics but is primarily used for vector graphics, which it handles beautifully. (AI was also the name of a movie by Steven Spielberg, but it never caught on the way ET did… But then again, ET doesn’t have a graphics file format named after him, so there.)

.eps: Encapsulated PostScript (EPS) files are used to transfer PostScript illustrations, logos and charts between illustration, page-layout and various other applications. EPS can contain both vector and raster/bitmap graphics. In my workflow, EPS files are being replaced by AI files and decaf is being replaced by espresso, but that’s a whole other post.

.indd: InDesign document (INDD) files are used by InDesign for page layout of all kinds of printed pieces, from business cards to books, even to books about business cards. InDesign can import a variety of graphics file types mentioned in this post (and other file types) and generate an .indd or .pdf file to give to the printer or publisher for final output.

.pdf: Portable Document Format (PDF) works with both raster/bitmap and vector graphics. It keeps a document looking identical onscreen and when printed across computer platforms and with any application that supports it. I pretty much can’t live without this one! If PDF didn’t exist, I’d be spending a lot more time hand-delivering paper documents to clients rather than moving on to the next project.

Those are the most common graphics file formats I see on a daily basis. As for me, I mainly use the following formats:

Onscreen: .png
Print: .indd, .ai, .psd
Both: .pdf

Hope this post gave you some insight into the wild world of file extensions and jargon that you may see associated with various graphics files. Now it’s time for me to head home to the .wak (wife and kid), enjoy a .rboc (refreshing beverage of choice) and watch some .mma (mixed martial arts) on my .hdtv.

Check back next week for Keith’s blog about ClearRiver’s success at the 2009 Great Lakes Bay Regional Expo.

If you would like to learn more about file formats contact ClearRiver, we’d love to help.

~Nathan