Guidelines for Using Images

Knowledge Base contributors can insert images into their articles to illustrate directions or to clarify the information they present.

Screenshots of applications and webpages are useful visual aids when necessary. This article provides Knowledge Base contributors with basic standards and guidelines for the images they insert. 

Guidelines for Using Images

General

Use screenshots sparingly. When software, web pages, or procedures change, they are not as easy to update as plain text. 

Appropriate Use of Screenshots

Use screenshots when the instructional steps are complex or several actions are incorporated into a step or into many steps. 

Use your best judgment when deciding whether or not to add a screenshot. Consider if it is really necessary to insert an image. 

• Can I still clearly convey this information by writing it out?

• Will adding an image to this step add any value for the reader?

Consistency

All KB contributors should use a standard image capturing method to allow for consistency across all Knowledge Base articles. 

PCs and Macs have different image capturing methods. Use the method that is appropriate for your operating system. 

PC

• Use the Snipping Tool.

• Make sure you take your snip at a high enough zoom so that the resolution is maintained once you place your image into the article.

Mac

• Use the print screen function and crop the image.

• Make sure that the section you want to crop is not too small and that it will retain a high resolution when you input the image to your article.

Images on the Page

Image Size

Screenshots should be big enough to get the point across without having to click on or enlarge the image.

However, images that are too large can disrupt the end user's experience. Again, judgment here is essential. You need to ensure that you size the image so that:

• It does not extend past the text around it.

• It is not too small.

• It is not blurry.

Image Positioning

Screenshots should be inserted below written instructions.

1. Place the cursor at the end of the preceding line of text.  

2. Hold down the Shift key. 

3. Press Enter. The cursor will shift to the next line without disrupting existing number formatting.

4. Press Shift + Enter again. You can, then, proceed with the rest of your article.   

Inputting Alternate Text (Alt Text)

Alternate text helps provide the context of images to users who use screen readers and other assistive tools by describing an image's content in words. When you add alternate text (also known as alt text) to an image, you do so under one of two conditions. You are either:

• Adding alt text to an image that has explanatory text above it.

• Adding alt text to an image that does not have explanatory text above it.

Images with Explanatory Text

Use null alt text when you have adequately described the purpose of the image in the text above the image. To insert null alt text, enter double quotes ("") into the alt text dialogue box. 

Images without Explanatory Text

In this case, there is no explanation for the purpose of an image in the text above it. Because there is no explanatory text above the image, use descriptive alt text.

Related Articles