File format does matter – for graphics as well

It goes without saying that a file format does matter.

Being used properly, screenshots, diagrams, and infographics can add significant value to your documentation by making the most complex piece of writing digestible. But what if your graphics is illegible, pixelated, discolored, or isn’t displayed at all? All efforts you made to develop a document can come into nothing and you will need to convert the graphics into another format or, even worse, design it from scratch.

Every time you start writing a document, you are considering which graphics you will include in it and which file formats will be the most appropriate. In general, to avoid extra work and make the graphics look good, you need to consider the following:

  • Final output (printed or online)
  • Graphics size
  • Type of graphics (flat icons, screenshots, custom graphics, etc.)

Final output

Normally, we use raster formats for the most of graphics (including screenshots, icons, and diagrams) in any type of a document, from PDF user guide to online help systems. Raster graphics features good portability among operating systems and browsers, has suitable file size, allows smooth blends of colors, and is supported by all screen-capturing tools. By the way, all screen captures that you take are stored as raster files only.

However, when creating an online help system, vector graphics can be more advantageous for skin design, as long as web content is accessed from various devices with different screen resolutions. Using raster nonscalable images on the web can make a mess with your content. For example, you can add a company logo to the skin of your online help system in two ways: First of all, you can configure several output types (mobile, tablet, and desktop), so that each of them has the same logo in a raster format but of different size. Or, you can add one logo in a vector format and its size will automatically adjust to any screen resolution.

For many years, vector graphics was underestimated due to its scarce support by browsers and platforms. With introduction of the SVG format as an open standard, the popularity of vector graphics usage has grown. Now, SVG features sufficient compatibility with all major modern web browsers.

Therefore, when it comes to developing online documentation, graphics like logos, headers, footers, and background is stored as vector files. This allows generating the final output that automatically adapts to any screen resolution. The only concern is that too much vector graphics may dramatically increase the size of your output file. And for help systems, it may result in increased time of page loading.

By and large, vector graphics can considerably enhance your help system and essentially reduce efforts that you take to adjust the online output, so that it is adequately displayed on various devices. However, it is useful to remember that some vector formats are suitable for particular software only. For example, EPS – for Macintosh and UNIX, and WMF – for Windows.

Graphics file size

The size of a raster graphics file depends on the color depth and resolution of an image, whereas in vector graphics, the number of vectors influences the file size. To decrease the size of a raster file, you can either resize the graphics or use lower color depth. However, when decreasing the size of a vector file, image resizing won’t work. The only way out is to decrease the number of vectors in the file (in other words, to simplify the graphics).

Consequently, in terms of file size, you can benefit from raster graphics if it goes about screenshots or flat icons with low color depth. In contrast, too much of complex vector graphics can overload the output file. So, when you use vector graphics in an online help system, make sure that it does not overload it.

Type of graphics

When planning the document development process, it is crucial to predict which types of graphics your document will include. To select a proper format for your graphics, consider the following items:

  • Flat icons
    If you use flat icons, raster formats with low bit depth, like GIF or PNG, can work. These file formats do not overload the output file size and are supported by the bulk of browsers, operating systems, and printers.
  • Screenshots
    All screen captures that you take are stored as raster files, and there is no possibility to convert them into any vector format. Thus, there is no other way but use raster formats for your screenshots. Remember that some raster formats are lossy. For this reason, consider using lossless file formats, like PNG, rather than lossy ones, like JPEG.
    Another important thing to remember is that the PNG format is more modern than JPEG. Thus, it may not work with some older versions of help systems. For example, if you use PNG graphics in Java help, there may be some problems with displaying the graphics.
  • Custom graphics
    Vector types of graphics is ideal for creating custom diagrams, infographics, or GUI images. They scale more easily without losing their quality. However, their portability is rather limited.
    At the same time, raster graphics, GIF animations in particular, can be extremely beneficial when you create custom graphics for online output. As long as animated graphics may better explain how some tools work or workflows happen.

Concluding tips

With all above written in mind, selecting the right format for storing graphics files seems to be quite easy. The graph below is just a quick reference that can help you to make a choice.what_format_to_chose

But what if a wrong choice was made and you are out of time? Definitely, you can use graphics file converters to transfer the graphics into the necessary format. However, for some pairs of formats, this may not solve a problem: converting a GIF screenshot to JPEG won’t handle an issue with poor color depth; likewise, you won’t be able to convert a raster file into a vector one preserving high level of details and color depth.

To be on the safe side and to eliminate any risks of last-minute converting of graphics or developing it all over again, create a backup copy of graphics and store it in a native format of a graphics tool that you use. This will allow you to save the graphics whenever you need to any format that your graphics tool supports. For example, if you create your custom graphics using MS Visio, storing source files in VSD format will allow you to easily modify your graphics any time you need and save it in any format that MS Visio supports.


2 thoughts on “File format does matter – for graphics as well

Leave a Reply

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

You are commenting using your 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