Graphics file formats for Word, PDF and HTML output

December 16, 2008

A perennial question that arises on the various technical writing lists I subscribe too is about ‘what graphics format should I use for screenshots?’

While many academic papers and long articles have been written on the merits of each and the technical details of why you should use one over another, here’s my short version:

Use GIF, PNG, or JPG for online. There are a couple of more obscure formats too, like SVG, but these three cover the main graphics file formats suitable for online delivery and display.

GIF and PNG are similar in final size (small!) but GIFs only have 256 colors whereas PNGs have 16+ million colors. I’ve used GIFs successfully for screenshots, but I know some people have problems with them. GIFs are fine for line drawings, but may ‘lose information’ with color-rich screenshots. I find it’s easier to save as PNG for everything except photos. That way I don’t have to think about it!

Use JPG for photos. Be aware that JPG (also 16+ million colors) is a lossy format, which means that every time you resize or alter the photo in some way, it will lose ‘data’ on saving. Over time, a regularly saved JPG will start to show artefacts (usually fuzzy patches and pixellation). If you’re old enough, you’ll remember when jokes were faxed or photocopied multiple times—the first few times wasn’t a problem, but after numerous copy iterations, much of the data was lost. If you’re doing high-end graphics things with photos you might want to consider TIFFs etc. but they are very large and do not work well (at all?) on the web.

Word handles most graphics formats well. However, Word does its own transformation of the graphic—including resizing it to fit the available space—so that 4 MB graphic that looks fine in Word will blow out Word’s file size and may make the document slower to load. Where you can, get a copy of the image, resize it so it’s smaller, save it as a PNG, then include it in the Word document.

My recommendation for clean and lean non-photographic graphics for all outputs is PNG; reserve JPGs for photos only.

Oh, one other thing… Crop or doctor the screenshot so the user doesn’t inadvertently click on it thinking it’s the real thing. Even after writing Help for many years, I still do this occasionally! I use SnagIt to capture the graphic and crop it (by selecting the area of focus, adding a torn edge, drop shadow, highlight/fade or some other method to indicate that the graphic isn’t the real application). SnagIt also lets you set up profiles, so you can set up a profile for your PNG settings and then just do a heap of captures in a row and they will all save as PNGs.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: