With so many image formats to choose from, how do you know which one will work best for your documentation? Here’s a quick primer:
GIF
GIF images are usually very tiny – they are great for web graphics. Also, the GIF format supports transparency, something that also makes GIF images good for web applications (since it makes it easy to place irregularly-shaped images on top of patterned backgrounds). You can also create animated GIFs, which you can use for web applications as well as PowerPoint slides, but be careful – like the blink tag, animated GIFs can be very annoying when they are misused or overused.
The GIF format’s main disadvantage is that GIF images can only contain a maximum of 256 different colors, so if you save a photograph as a GIF, it will look ABSOLUTELY TERRIBLE. Also, avoid using the GIF format to save images with color gradients or subtle shading – these WILL NOT translate well. Screenshots are questionable – you may want to avoid GIFs for that application depending on the amount of colors shown on the screen.
 Original JPEG, 110k |
 JPEG using 70% compression, 10.9k |
 JPEG using 99% compression, 5.36k |
 GIF (uncompressible), 134k |
JPG
JPEG images support millions of colors (24 bits of color information), so they are ideal for photographs and images with detailed shading or color gradients. When an image is saved as a JPEG, a variable amount of compression is applied (most image editing applications let you specify the amount of compression). Compressing a JPEG image reduces the space it takes up on the disk, but increases the possibility of degrading the image – you sacrifice quality for size.
Be careful when compressing JPEGs – image quality decreases exponentially with the amount of compression used, and the ugly artifacts generated by the compression algorithms can make your images look terribly unprofessional.The table below shows examples of a photograph saved as a JPEG with various degrees of compression, and also saved as a GIF (click each picture to enlarge). Note how the compressed JPEG images show pixellation and compression artifacts. Also, note how the GIF’s limited color range makes the image look grainy.
BMP
Microsoft’s image format. You can use lots of colors here, but BMP images can’t be compressed, so they are usually gigantic. Don’t use this format.
PNG
PNG is not ideal for web graphics since it is not completely supported by the major browsers. The PNG format supports transparency AND millions of colors, and provides more compression than say, a BMP file. A PNG might be useful if you ever find yourself in a situation where you need an image with a transparent background AND lots of colors, e.g. a PowerPoint slide containing a clipart diagram that has overlapping elements, some of which are photographs. One thing to keep in mind about PNGs is that they are not as compact as JPGs or GIFs, so for our PowerPoint example, you would want to make sure to use them sparingly, so as to avoid unnecessary bloat.
Other things to consider…
When you choose an image file format to use for a particular project, remember to consider your space limitations, your needs in terms of number of colors and transparency, and how they work together – you may need to compromise quality for size, or give up a large number of colors in order to have a transparent background. Also, consider how you will be creating and delivering your documentation, since this can also influence your choice of file formats; e.g., if you are creating a Captivate project, it may not be necessary to worry about the disk space used by the images you are using, since Captivate applies an adjustable amount of JPEG compression when it renders a project as a Shockwave file. Printed documentation is another application where you may also want to sacrifice disk space in favor of higher quality.
Or maybe none of the formats that we’ve mentioned work for you, and you need to use something else entirely (like if you are dealing with vector-based images that you will need to re-use, or if you’re preparing full-color graphics for printing using spot colors or a four-color process). But then again, if you’re doing those things, you probably already knew everything that we’ve talked about.
So remember, carefully consider your needs and your options before you commit to a particular format. What good is a well-written user guide or operating manual if it’s filled with illegible screenshots?