KB User's Guide - Documents Tab - Image Guidelines

This document explains guidelines for images included in your KB documents, including standards for formatting, sizing, and displaying.

Image Guidelines

  • Use the .png format if possible, otherwise use one of the following file formats: .jpg, .gif.

  • If possible, try to make your images no wider than 600px. This ensures that users with XGA resolution (1024x768) displays can view your content without a scroll bar and is more accessible for smartphone users.

  • The size of the image must be under 125MB when using the the multi-select uploader in Firefox, Chrome and Safari.  A progress bar will display a confirmation (or error) message.

  • Unfortunately, this does not work in IE, so IE will not have any multi-select feature and is still limited to 40MB files.

  • You must insert appropriate alt text for accessibility purposes.

  • The image should be clear and readable.

  • Use red outlines to highlight important buttons, text fields, or other information in images. The image below shows all document attachments outlined in red.

    doc attachment folder on the edit screen_select attachment to emebed into doc from here

    Tips

    • Avoid over-sized and highly detailed screenshots.

    • Don't take screenshots of an over-sized window if you're only interested in one button, unless you're trying to show the user where to find that one button on the screen. Crop out the part of the scrren you want to highlightbolster it with detailed text.

    • Save images in formats of PNG or JPG or GIF.

    • Give your screenshots descriptive names. If your screenshots are named kb4643_01, kb4643_02, etc, it will be very confusing to make edits to the document and/or screenshots.

    • Make sure the document makes sense even without the screenshots. Screenshots are supposed to enhance the text of an existing document. Your document should be fully comprehensible without them.

      Examples

      giant screen shot with a lot of white space_horrible example

    • This is a poor choice for a screenshot because it's far too big for the information it contains and the rounded rectangle is too tight on the text.

      medium sized image still with excessive whitespace

    • This is an okay screenshot because the rounded rectangle is just right but the image is a bit big, however, there is exessive whitespace.

      ideal sized image with precise information highlighted with a round cornered rectangle

    • This is a better screenshot because the rounded rectangle is just right and the image size is just right for the content.

    Capturing screenshots

    See Also:




    Keywords:kbadmin knowledgebase tools users guide screenshots guidelines help format rules images image   Doc ID:4643
    Owner:Teresa A.Group:KB User's Guide
    Created:2006-04-27 18:00 CSTUpdated:2021-10-29 12:53 CST
    Sites:KB Demo, KB Demo - Child Demo KB, KB User's Guide, Social Science Computing Cooperative
    CleanURL:https://kb.wisconsin.edu/kbGuide/kb-document-image-guidelines
    Feedback:  9   1