Page Comparison

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

Screenshots of applications and webpages are useful visuals aid when necessary. This article will provide Knowledge Base contributors with basic standards and guidelines for the images they insert. 

Guidelines for Using Images

General

Use screenshots sparingly. Remember that 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 judgement 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 to the end user by writing it out?
  • Will adding an image to this step add any value for the end user?

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.

  Tip
  title Tip
  When you are writing an article in edit mode, you can always size down an image if it is too large for the page. However, you cannot enlarge the image if it is too small. Therefore, when you take a screenshot, you should aim to capture as large an image as you can.

  
  

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, judgement 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.

Make sure your image is not blurry.

Image Background and Borders

All images (especially images with a white background) should have a 1x black border. Images that do not have borders will either get lost or look awkward on a white page. 

Image Positioning

Screenshots should be inserted below the written instructions. Add a space after the image if necessary so it does not run into unrelated steps below it.

1. Place the cursor at the end of the preceding line of text.  
   • If the previous line contained an image, place the cursor at the every end of the image. 
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 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, or
• Adding alt text to an image that does not have explanatory text above it.

Images with Explanatory Text

In this case, an explanation for the purpose of the image is in the text above an image. Thus, to avoid redundancy, use null alt text. To put in null alt text, just enter double quotes ("") into the alt text dialogue box. 

• ALT TEXT EXAMPLE: WITH explanatory text above the image.
  • Use null alt text when you have adequately described the purpose of the image in the text above the image.

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